表单必须用<form>包裹且不可嵌套，action和method属性需明确设置，radio/checkbox的name值须统一以保证分组逻辑，required仅作基础校验，提交时应禁用按钮但避免使用disabled导致数据丢失。
表单必须用 <form> 包裹，否则提交逻辑失效
浏览器只识别 <form> 元素内的控件为可提交字段。漏写或误写成 <div>、<section>，会导致点击提交按钮后页面刷新但数据完全没发出去——连 console.log 都捕获不到任何值。
-
action属性必须明确：指向后端接收地址（如"/api/submit"），测试阶段可用"#"或空字符串临时占位，但别省略 -
method推荐显式写成"POST"：问卷通常含多字段、中文、文件上传，GET会暴露数据在 URL 且有长度限制 - 避免嵌套
<form>：HTML 标准禁止表单嵌套，Chrome 会自动截断内层表单，导致部分字段丢失
<input type="radio"> 和 <input type="checkbox"> 的 name 值决定分组逻辑
用户选“男/女”却能同时勾选两个选项？大概率是两个 <input> 的 name 值不一致。浏览器靠 name 把同组单选框绑定为互斥关系，靠相同 name 把复选框归为同一数组字段。
- 单选题所有选项必须共用一个
name（如name="gender"），value写实际提交值（"male"/"female"） - 多选题每个选项也用相同
name（如name="hobby"），后端收到的是以逗号分隔的字符串或数组（取决于后端解析方式） - 别用中文或空格作
name值：name="爱好"在某些 PHP 环境下会解析失败，坚持用英文下划线命名（name="user_hobby"）
必填项校验不能只靠 required 属性
required 能阻止空提交，但对“选了‘其他’却没填文本框”“邮箱格式错误”“手机号少一位”完全无效。纯前端校验只是用户体验优化，后端必须重新验证。
- 给关键字段加
required是基础，但需配合type="email"、type="tel"触发浏览器原生提示（注意：这些类型在 iOS Safari 上兼容性较差，别依赖其正则） - 自定义校验用
addEventListener("submit", ...)拦截表单，调用checkValidity()并手动reportValidity()显示气泡提示 - 隐藏字段（如防重复提交的 token）也要参与校验逻辑，否则可能被绕过；
disabled字段不会提交，要用readonly替代
提交后禁用按钮防止重复点击，但别用 disabled 一禁了之
用户狂点提交按钮，后端可能收到 5 条重复问卷。禁用按钮是必要手段，但直接 button.disabled = true 会导致表单数据无法提交——因为 disabled 控件的值不会包含在提交载荷中。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：提交前设
button.disabled = true，同时用button.setAttribute("aria-disabled", "true")保持可访问性 - 按钮文字要变（如从“提交”变成“提交中…”），否则用户不确定是否生效
- 如果提交失败（网络错误或后端返回 4xx/5xx），必须恢复按钮状态并提示错误，否则用户以为卡死而反复刷新页面
