HTML表单是容器、控件与语义关联协同工作的结构：form为根容器，需设action和method；label必须通过for/id显式绑定input；控件须有name才提交；submit按钮类型决定提交行为；原生验证需手动触发。
HTML 表单不是一堆标签的堆砌，而是一套有明确职责分工的协作结构 —— 容器、控件、语义关联缺一不可。
form 元素是表单的根容器，不是装饰性标签
<form></form> 本身不渲染可见内容，但它是所有表单行为的控制中心。浏览器和辅助技术（如屏幕阅读器）依赖它识别「这是一个可提交的数据单元」。
- 必须包含
action属性（哪怕只是action="#"），否则提交时可能触发页面重载或 404 -
method默认为GET，但多数场景应显式设为POST，尤其涉及密码、文件或敏感数据时 - 含文件上传控件（
<input type="file">）时，enctype必须设为multipart/form-data，否则服务端收不到文件字段 - 若用 JavaScript 拦截提交，仍建议保留
action和method，保证无 JS 降级可用
label 与 input 的 for/id 关联决定可访问性成败
仅靠视觉对齐（比如 label 紧挨着 input）无法让屏幕阅读器正确播报输入项含义。必须用 for 和 id 建立显式绑定。
-
<label for="email">邮箱</label><input id="email" name="email">✅ 有效 -
<label>邮箱<input name="email"></label>✅（隐式包裹，但不推荐用于复杂布局） -
<label>邮箱</label><input name="email">❌ 无关联，读屏软件无法将文字与控件配对 - 多个
input共享同一name（如单选组）时，每个仍需独立id，且各自label的for指向对应id
name 属性才是服务器真正接收的字段名
用户填的是 value，但服务器收到的是 name="username" 对应的键值对。没有 name 的控件（包括 <button></button>、<input type="submit">）不会随表单提交。
-
<input type="text" id="user" value="admin">→ 不提交任何数据（缺name） -
<input type="text" name="username" value="admin">→ 提交username=admin - 复选框（
type="checkbox"）未勾选时完全不发送该字段；如需“未选也传空值”，得用隐藏域配合 JS 控制 - 数组式命名如
name="hobby[]"或name="item[0].price"取决于后端解析能力，前端无需特殊处理，但需确认服务端是否支持
提交按钮类型影响表单行为逻辑
不是所有按钮都能触发 submit 事件。只有 type="submit"（或省略 type 的 <button></button>）才会触发表单提交流程。
-
<button>提交</button>→ 默认type="submit"，会提交 -
<button type="button">取消</button>→ 明确禁用提交，适合 JS 控制的清空或跳转 -
<input type="image" src="go.png">→ 提交时额外发送点击坐标（x/y参数），注意后端是否需要过滤 - 在单个表单中混用多个
type="submit"按钮时，只有被点击的那个的name和value会随其他字段一同提交
最容易被忽略的是：表单验证（required、type="email" 等）只在原生提交时生效；用 event.preventDefault() 拦截后，这些约束不会自动触发，得手动调用 checkValidity() 或遍历 validity 对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
