在网页开发中，收集用户输入的信息并提交到后端是常见需求，而HTML表单就是实现这个功能的核心载体。很多新手刚开始接触时都会疑惑HTML表单提交数据怎么写，下面我们就从基础概念到实际代码一步步讲解。
表单提交的核心结构
HTML表单提交数据的基础是<form>标签，它定义了表单的提交范围，所有需要提交的数据元素都要放在<form>标签内部。form标签有两个核心属性需要重点关注：
- action：指定表单数据提交到的后端接口地址，比如
/submit-form，如果留空则默认提交到当前页面。 - method：指定数据提交的HTTP方法，常用的是get和post两种，get会把数据拼在URL后面，适合少量非敏感数据；post会把数据放在请求体里，适合提交敏感或大量数据。
常用的表单输入元素
表单要收集不同类型的数据，需要搭配不同的输入元素，这些元素都需要设置name属性，否则提交时后端无法识别对应的数据字段：
文本输入类
最常用的文本输入框通过<input type="text">实现，还有密码框<input type="password">，多行文本用<textarea>标签。
选择类
单选框用<input type="radio">，同一组单选框要设置相同的name值；复选框用<input type="checkbox">；下拉选择用<select>配合<option>标签。
提交按钮
表单需要提交按钮来触发提交动作，可以用<input type="submit" value="提交">，也可以用<button type="submit">提交</button>。
完整表单提交代码示例
下面是一个包含常见输入项的完整表单提交示例，你可以直接复制运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML表单提交示例</title>
</head>
<body>
<!-- 表单开始，提交到当前页面，使用post方法 -->
<form action="/submit-form" method="post">
<p>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" required>
</p>
<p>
<label>密码：</label>
<input type="password" name="password" placeholder="请输入密码" required>
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
</p>
<p>
<label>兴趣爱好：</label>
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">运动</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">音乐</label>
</p>
<p>
<label>所在城市：</label>
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<p>
<label>个人简介：</label><br>
<textarea name="intro" rows="4" cols="30" placeholder="请输入个人简介"></textarea>
</p>
<p>
<input type="submit" value="提交表单">
<input type="reset" value="重置内容">
</p>
</form>
</body>
</html>提交后的数据形式
当表单提交后，数据会按照键值对的形式传递到后端，比如上面示例中如果用户输入用户名为zhangsan，性别选男，那么提交的键值对就是username=zhangsan&gender=male，如果是post方法，这些数据会在请求体里，后端可以通过对应的name值获取每个字段的内容。
需要注意的是，如果要上传文件，需要在form标签里添加enctype="multipart/form-data"属性，否则文件数据无法正确提交。另外，前端也可以通过JavaScript拦截表单的submit事件，先做数据校验再决定是否提交，避免提交无效数据到后端。