radio需同name实现互斥，checkbox name加[]传数组，label须用for/id绑定，fieldset+legend语义分组，required对多选控件校验有限制。
直接用 <input type="radio"> 和 <input type="checkbox"> 就能实现问卷选项组合，但多数人卡在 name 值混乱、label 绑定失效、提交后取不到值这三处。
radio 按组互斥必须共用 name 属性
浏览器靠 name 属性识别哪些单选按钮属于同一组。name 值不同，就变成多个独立控件，用户能同时选中多个 —— 这不是 bug，是预期行为。
- 正确写法：
<input type="radio" name="education" value="bachelor"><label>本科</label>和<input type="radio" name="education" value="master"><label>硕士</label> - 错误写法：两个 radio 的
name分别为edu1和edu2，结果用户可全选 - 注意：value 值必须唯一且有意义，后端依赖它做逻辑判断，别用中文或空格（如
value="本科"），推荐用英文或下划线命名（value="bachelor"）
checkbox 多选时 name 后加 [] 才能传数组
如果不加方括号，后端接收到的只是最后一个被勾选项的 value；加了 []，PHP/Node.js 等主流后端才会把同名 checkbox 解析为数组。
- 前端应写：
<input type="checkbox" name="hobby[]" value="reading"><label>阅读</label> - 不加
[]时，即使勾选三个，后端req.body.hobby只拿到字符串"travel"（最后那个） - 现代框架如 Express 默认不自动解析
[]，需配合urlencoded({ extended: true })中间件 - 若用 Fetch 提交，记得设
Content-Type: application/x-www-form-urlencoded，否则[]会被忽略
label for 和 id 必须严格匹配才能点文字选中
很多人写了 <label>男</label> 却发现只能点小圆圈才触发，点“男”字没反应 —— 根本原因是没配 for 和 id。
- 必须成对出现：
<input id="gender-male" type="radio" name="gender" value="male"><label for="gender-male">男</label> - id 值不能含空格或特殊字符，推荐用短横线分隔（
gender-male），避免用gender male或gender_male（部分旧浏览器不兼容下划线） - 不配
for/id也能用，但可访问性（a11y）不达标，屏幕阅读器无法关联文字与控件
fieldset + legend 是语义化分组的最低成本方案
问卷里常有“基本信息”“兴趣偏好”等模块，用 <div> 包裹再加 CSS 样式看似可行，但语义丢失、SEO 弱、辅助技术难识别。
<ul>
<li>标准写法：<code><fieldset>
<legend>您的职业</legend>
<input type="radio" name="job" value="dev"><label>开发者</label>
</fieldset>
<legend></legend> 必须是 <fieldset></fieldset> 的第一个子元素，否则语义断裂<fieldset></fieldset> 加边框，用 CSS 清除即可：fieldset { border: none; padding: 0; }
<fieldset></fieldset> 的 focus 样式支持不稳定，测试时务必真机验证最容易被忽略的是：表单提交前，浏览器默认会对 required 字段做校验，但 radio 和 checkbox 的 required 行为不一致 —— radio 组只要有一个被选中就算通过，而 checkbox 组哪怕只勾一个也满足 required；如果想“至少勾两个”，纯 HTML 无法实现，必须用 JavaScript 拦截 submit 事件手动校验。
