表单必须用包裹，name属性决定提交字段名，按钮需设type="submit"；缺一不可，否则提交失效。
表单必须用 <form></form> 包裹，否则提交逻辑失效
浏览器只识别被 <form></form> 元素包裹的控件为“可提交表单域”。没包进去的 <input>、<select></select> 看似能输能选，但点击提交按钮时它们的值根本不会发给服务器。
-
<form></form>是语义边界，也是运行时边界——submit事件、reset行为、FormData构造都依赖它 - 常见错误：把
<input type="text">放在<form></form>外面，还指望event.target.elements能拿到它 - 多个表单可以共存，但不能嵌套：
<form></form> <form></form>是非法 HTML，浏览器会自动修正（通常拆开），导致结构错乱
name 属性才是表单数据的键名，id 不参与提交
后端收到的字段名，完全取决于每个表单控件的 name 属性值。很多人误以为 id 或 class 会影响提交内容，其实它们只用于 CSS 或 JS 查找，对表单序列化毫无作用。
-
<input name="email">→ 提交后变成email=xxx - 没写
name的控件（比如<input type="checkbox">）默认不提交，哪怕勾选了也没用 - 同名的多选控件（如多个
name="hobby"的 checkbox）会以数组形式提交，但前提是服务器端能正确解析 multipart/form-data 或 application/x-www-form-urlencoded 中的重复键
按钮必须设 type="submit"，否则点不动表单
很多页面里写着“提交”字样的 <button></button> 实际是 type="button"（浏览器默认值），点了没反应——它根本不会触发表单的 submit 事件，也不会尝试提交。
- 显式写
<button type="submit">提交</button>才安全 -
<input type="submit">和<button type="submit"></button>行为一致，后者更利于自定义样式和内嵌 HTML - 如果用了
event.preventDefault()却忘了手动收集数据并发送，就会出现“点了没反应”的假死现象
提交前校验靠 required 和 pattern，但别全信前端
HTML5 内置校验（如 required、minlength、pattern）能拦截明显错误，提升体验，但它只在用户交互时触发，且可被绕过（禁用 JS、直接 fetch、curl 等）。
立即学习“前端免费学习笔记（深入）”；
-
<input required pattern="[0-9]{6}">会在提交前检查是否为空、是否匹配正则 - 校验失败时浏览器会弹原生提示（不同浏览器样式不同），无法统一控制 UI
- 复杂逻辑（如“密码和确认密码一致”）必须用 JS 监听
input或submit事件手动判断，setCustomValidity()是关键接口
form、name、type="submit" 这三个点一旦漏掉或写错，整个流程就卡在第一步。很多人调试半天发现只是少了个 name。 
