HTML表单是网页实现用户交互的核心组件，主要用于收集用户输入的信息并提交到后端处理，而form标签就是创建表单的基础容器，所有表单相关的控件都需要放在form标签内部才能正常完成提交逻辑。
form标签的基础结构
form标签本身是一个块级元素，最基础的写法只需要包裹表单控件即可，不过要实现提交功能，还需要设置两个核心属性：action和method。
action：指定表单提交后数据发送的目标地址，可以是后端接口路径，也可以是当前页面地址method：指定数据提交的方式，常用的是get和post两种
下面是一个最基础的表单结构示例：
<form action="/submit" method="post"> <!-- 表单控件会放在这里 --> <input type="text" name="username" placeholder="请输入用户名"> <input type="submit" value="提交"> </form>
常见表单控件搭配
form标签内部可以搭配多种输入控件，不同的type属性对应不同的输入类型，所有需要提交数据的控件都必须设置name属性，否则提交时不会携带该字段的数据。
文本输入类控件
最常用的文本输入控件是<input>标签，不同的type对应不同场景：
- type="text"：普通文本输入，比如用户名、昵称等
- type="password"：密码输入，输入内容会被掩码显示
- type="email"：邮箱输入，提交时会自动校验格式是否符合邮箱规则
选择类控件
除了文本输入，还有下拉选择、单选、多选等控件：
- <select>标签实现下拉选择，内部的<option>是具体选项
- type="radio"实现单选，同一组单选需要设置相同的name属性
- type="checkbox"实现多选，每个多选框可以设置不同的name或者相同的name加不同value
组合使用的示例如下：
<form action="/user/info" method="post">
<p>用户名：<input type="text" name="username" required></p>
<p>密码：<input type="password" name="password" required></p>
<p>邮箱：<input type="email" name="email"></p>
<p>性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="music">音乐
</p>
<p>城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</p>
<input type="submit" value="提交信息">
</form>表单提交的相关设置
提交方式区别
method属性的get和post是两种最常用的提交方式，两者的区别如下：
| 提交方式 | 数据位置 | 适用场景 |
|---|---|---|
| get | 拼接在action地址的后面，以查询参数的形式传递 | 数据量小、不涉及敏感信息的查询类请求 |
| post | 放在请求体里面传递 | 数据量大、包含密码等敏感信息的提交类请求 |
提交前的校验
可以在form标签上添加onsubmit属性，在提交前执行自定义的校验逻辑，只有返回true才会正常提交，返回false会阻止提交。也可以使用HTML5自带的校验属性，比如required表示必填，minlength设置最小长度，maxlength设置最大长度，浏览器会自动完成基础校验。
自定义校验的示例如下：
<form action="/submit" method="post" onsubmit="return checkForm()">
<input type="text" name="username" id="username">
<input type="submit" value="提交">
</form>
<script>
function checkForm() {
var username = document.getElementById("username").value;
if (username.trim() === "") {
alert("用户名不能为空");
return false;
}
return true;
}
</script>注意事项
1. 所有需要提交数据的表单控件都必须放在form标签内部，否则点击提交按钮不会触发表单提交逻辑。
2. 控件的name属性是后端接收数据时使用的字段名，必须和后端约定的字段名保持一致，否则后端无法正确获取数据。
3. 如果是本地测试，action可以设置为空，提交后会刷新当前页面，数据会拼接在地址栏（get方式）或者放在请求体里（post方式）。
4. 如果需要在不刷新页面的情况下提交表单，可以结合JavaScript的fetch或者XMLHttpRequest方法，手动获取表单数据后发送请求，不需要依赖form标签的原生提交行为。