name属性未对齐会导致radio单选互斥失效、checkbox多选逻辑错乱，进而造成问卷数据丢失；radio需同name值实现互斥，checkbox同name提交为数组，均须配合fieldset+legend语义分组，且required仅对radio有效。
name 属性没对齐，radio 和 checkbox 就会互斥失效——这是问卷提交后数据全丢最常见原因。
radio 单选组必须共用同一 name 值
浏览器靠 name 判断哪些单选按钮属于一组。如果每个 input[type="radio"] 的 name 都不同，那它们就各自独立，无法实现“选一个、其他自动取消”的行为。
常见错误现象：
- 点一个选项，另一个同题选项仍保持选中状态
- JS 读
document.querySelector('input[name="q1"]:checked')总是null
正确写法示例：
<label><input type="radio" name="experience" value="0-1"> 0–1 年</label> <label><input type="radio" name="experience" value="1-3"> 1–3 年</label> <label><input type="radio" name="experience" value="3+"> 3 年以上</label>
注意：value 必须有且唯一，否则后端收不到可区分的值；name 必须完全一致（大小写敏感）。
checkbox 多选需统一 name，但后端接收方式不同
checkbox 也依赖 name 归组，但和 radio 的语义不同：它允许多个同时选中，提交时同名字段会以数组形式传给后端（如 PHP 的 $_POST['hobbies'] 是数组）。
容易踩的坑：
- 把多选题的
name写成和单选题一样（比如都叫q2），导致单选逻辑被覆盖 - 前端用 JS 取值时只取第一个：
document.querySelector('input[name="hobbies"]:checked').value→ 漏掉其余选项 - 没加
required却期望用户必选，而浏览器不会阻止空提交（checkbox不支持原生必填校验）
推荐做法：用 document.querySelectorAll('input[name="hobbies"]:checked') 遍历，或后端明确按数组处理。
fieldset + legend 是语义化分组的刚需
多个 radio 或 checkbox 组之间必须视觉+语义隔离，否则屏幕阅读器无法区分“学历”和“工作年限”两组问题，移动端点击区域也易误触。
不要这样写：
<p>学历：</p> <input type="radio" name="xueli" value="high">高中<br><input type="radio" name="xueli" value="ba">本科<br><p>工作年限：</p> <input type="radio" name="years" value="1">1年<br>
应该这样：
legend 不仅提供标题，还让整组控件在无障碍 API 中被识别为一个逻辑单元。
required 属性对 radio/checkbox 的实际效果差异
required 对 radio 有效：只要同组中至少一个被选中，就通过校验；未选则报错。
required 对 checkbox **无效**：浏览器不校验“是否至少选一个”，因为 checkbox 本身允许全不选。若业务要求必选，必须用 JS 手动判断，例如：
function validateCheckboxes(name) {
return document.querySelectorAll(`input[name="${name}"]:checked`).length > 0;
}
// 调用：if (!validateCheckboxes('interests')) { alert('请至少选择一项兴趣'); }
别指望 required 能兜住多选题的必填逻辑——这是最常被忽略的兼容性盲区。
name 拼错一个字母、fieldset 忘包一层、或多选题交由 required 去扛校验。这些地方一松，数据就断。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
