表单必须用包裹，控件需有name属性，按钮须明确type；原生校验不可靠，后端必须等价验证。
表单必须有 <form></form> 标签包裹，否则提交逻辑失效
浏览器只识别顶层 <form></form> 元素来收集、验证和提交数据。单独写 <input> 或 <button></button> 而不包在 <form></form> 里，submit 事件不会触发，FormData 也拿不到值。
-
action属性决定提交目标（可为空，当前页处理） -
method推荐显式写method="post"或method="get"，不要依赖默认值（不同浏览器对默认method的处理略有差异） - 如果用 JavaScript 提交，
<form></form>仍不可省——否则form.submit()会报错：TypeError: form.submit is not a function
name 属性是表单控件的“身份证”，没它后端收不到字段
HTML 表单提交时，只把带 name 的控件（<input>、<select></select>、<textarea></textarea>）的值发出去。id 或 class 不参与提交，纯前端用。
-
<input type="checkbox" name="agree">和<input type="radio" name="gender">必须同名才能互斥或成组 - 多选下拉（
<select multiple></select>）的name建议加[]后缀（如name="hobbies[]"），PHP/Node.js 等后端才容易解析为数组 - 隐藏域也要写
name：<input type="hidden" name="csrf_token" value="abc123">，否则白写了
按钮类型不写 type 就默认是 submit，常引发意外提交
很多开发者以为 <button>点击</button> 只是普通按钮，其实不加 type 属性时，它的行为由父 <form></form> 决定——浏览器会把它当 submit 按钮处理。
- 明确意图：按钮用于提交就写
<button type="submit"></button>；用于重置写<button type="reset"></button>；其他一律写<button type="button"></button> - 图标按钮、加载中状态按钮尤其要注意：漏写
type="button"会导致点一下就刷新页面 - 用
<a></a>或<div> 模拟按钮？不行——它们无法被键盘 <code>Enter触发，也不进表单提交流程，可访问性直接掉线原生校验靠
required、pattern等属性，但别全信前端验证浏览器内置校验（比如
required、email类型、minlength）能拦截明显错误，提升体验，但它完全可被绕过：禁用 JS、改 DOM、curl 直接发请求，都能跳过。立即学习“前端免费学习笔记（深入）”；
-
pattern是正则，但注意它只校验整个字符串（隐含 ^$ 锚点），写pattern="[0-9]+"就够了，不用写^[0-9]+$ -
novalidate放在<form></form>上可关掉整表单校验，适合自定义 JS 验证逻辑 - 真正要拦住脏数据，后端必须做等价校验——前后端规则不一致，早晚出问题，比如前端限制 5–20 字，后端却只判空
name缺失、type遗忘、<form></form>包裹不全，这三个地方一出错，调试时往往卡半天才反应过来不是 JS 问题，而是 HTML 根子上没立住。 -
