form是语义必需标签，非可选容器；浏览器依赖它识别数据提交单元，缺失则导致提交失效、required验证失灵、submit按钮无响应及无障碍支持中断。
form 是网页交互式表单中唯一不可省略的语义化标签。没有它，表单控件就只是孤立输入框，无法触发原生提交、回车提交、required 验证或与 submit 按钮正确关联。
为什么 form 不是可选容器，而是语义必需？
浏览器靠 form 标签识别“这是一组要提交的数据”，而不是靠视觉包裹。缺失 form 会导致：
- 点击
input type="submit"或按回车无反应 -
required属性完全失效 - JavaScript 中
form.submit()报错或静默失败 - 屏幕阅读器无法将控件归入同一逻辑表单单元
必须配 action（哪怕填 "#"）和 method（"get" 或 "post"），否则语义断裂——空 action 或拼写错误如 aciton 会让提交静默丢弃。
label 是可访问性硬性要求，不是装饰文字
没 label 的表单在 WCAG 2.1 AA 级别直接不达标。常见失效场景：
- 用
div或span替代label，导致触屏用户难以精准聚焦 -
for属性值与对应input的id不一致（大小写、空格、拼写） - 把
label写成空标签，或内部嵌套button等交互元素
推荐用包裹式写法：<label>邮箱<input type="email" name="email"></label>，彻底规避 id/for 同步问题。
别把 main、section、article 当作表单容器用
这些标签描述文档结构层级，和表单功能无关。强行套用会混淆语义：
-
main只能出现一次，且不能嵌套在header、nav、footer内——但它不参与表单提交逻辑 -
section要求有标题（h2~h6），仅用于逻辑分组，不是“好看的分块盒子” - 登录表单放在
main里合理，但把它包进section前得先问：这个区块是否有独立主题和标题？
真正影响表单行为的只有 form 和 label；其他语义标签只负责告诉机器“这是什么内容”，不改变提交机制。
最容易被忽略的是：表单语义完整性不取决于视觉布局，而取决于 form 是否存在、是否配置正确，以及每个可输入控件是否被 label 明确关联。样式可以重写，但这两层语义一旦缺失，无障碍、验证、提交都会断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
