form标签是表单数据提交的唯一合法根节点，无它则控件name值不会被发送；涉及向服务端发送数据时必须使用，如登录、搜索、文件上传、多步骤表单等场景。
form 标签不是装饰性容器，它是表单数据提交的唯一合法根节点。没有它，input、select 等控件的 name 值不会随提交动作被发送到服务器。
什么时候必须用 form 包裹控件
只要涉及「向服务端发送数据」，就必须用 form。典型场景包括：
- 用户登录：
input类型为text和password，配合method="post"防止密码泄露 - 搜索框提交：
method="get"使关键词出现在 URL 中，利于分享和后退重试 - 文件上传：必须设置
enctype="multipart/form-data"，且input type="file"只在form内有效 - 多步骤表单（如注册）：每个步骤可独立
form，避免一次性提交所有字段
label 不只是文字说明，它直接影响交互体验
点击 label 文本能聚焦对应控件，这对小尺寸复选框/单选按钮至关重要。但容易出错的是绑定方式：
- 用
for属性时，值必须严格匹配目标input的id（大小写敏感、不可含空格） - 嵌套写法更可靠：
<label>同意协议<input type="checkbox" name="agree"></label>，无需id/for - 没加
label的checkbox，移动端点击区域极小，用户常点不中
input type 选错会导致语义失效或校验丢失
HTML5 提供的 type 值不只是视觉差异，还触发原生校验和软键盘优化：
立即学习“前端免费学习笔记（深入）”；
-
type="email"在 iOS 上唤起带 @ 符号的键盘，且浏览器自动检查格式（空值或无 @ 会报错） -
type="number"禁止输入字母，但注意：它的值仍是字符串，后端需转类型 -
type="date"在 Chrome/Firefox 显示日期选择器，但 Safari 旧版本不支持，需降级为text+ JS 库 - 别用
type="text"模拟数字或邮箱——绕过校验、失去语义、无障碍阅读器无法识别用途
最容易被忽略的是 form 的 novalidate 属性：它禁用所有原生校验，但只作用于当前表单；如果 JS 提交逻辑没补全校验，用户可能发空数据过去。
