name属性必须完全一致才能构成同一组单选按钮，大小写、空格差异均导致分组失效；label、fieldset等仅提升体验与可访问性，不影响分组逻辑。
name属性必须完全一致才能算同一组
浏览器只靠name属性识别分组，不看id、class、位置或标签嵌套关系。哪怕只差一个空格、大小写不一致（如gender vs Gender），就会被当成两组独立控件，导致“看起来是单选，实际能多选”。
常见错误现象：
- 两个按钮都选中了，但预期只能选一个
- JS 用
document.querySelectorAll('input[name="xxx"]')拿不到全部预期元素 - 后端收不到值，或收到多个同名字段（说明前端实际发出了多个不同
name）
实操建议：
- 所有属于同一逻辑组的
input[type="radio"]，name值必须逐字符相同 - 命名时统一用小写+下划线（如
user_role），避免大小写混淆 - 前后端约定好字段名，别前端写
theme，后端按ui_theme去取
不同组必须用不同name值
如果页面上有“性别”和“语言偏好”两组单选按钮，它们的name不能一样。否则用户在选完“男”之后再点“Python”，前者会自动取消——这不是 bug，是浏览器强制互斥的正常行为。
使用场景：
- 表单含多个互不干扰的选择项（如：国家/地区、付款方式、通知渠道）
- 动态生成的选项块（如每道题一个单选组，
name="q1"、name="q2"）
实操建议：
- 用语义化且带上下文的
name，比如delivery_method比opt1更可靠 - 避免复用已存在的
name，尤其在嵌入第三方组件或拼接模板时 - 调试时打开开发者工具的 Elements 面板，直接搜索
name=快速定位所有同名 radio
label绑定不影响分组，但影响可用性
label的for属性和input的id只是增强点击体验与无障碍支持，跟分组逻辑无关。即使不写label，只要name一致，单选功能依然成立。
容易踩的坑：
- 只用
<label><input>文字</label>包裹，但没设id/for，在某些 CSS 重置或 Flex 布局下点击区域失效 - 多个
input用了同一个id，导致label点击时行为不可预测（HTML id 必须唯一）
实操建议：
- 每个
input[type="radio"]配唯一id，对应label用for显式绑定 - 不要用
display: none隐藏 radio，改用position: absolute; opacity: 0; width: 1px; height: 1px;等可访问方案
fieldset + legend 是语义化分组，不是技术分组
fieldset和legend不会改变浏览器对name分组的判断，但它把视觉、语义、键盘导航（如 Tab 进入/退出整组）统一起来了。对屏幕阅读器用户尤其关键。
性能 / 兼容性影响：
- 无运行时开销，纯语义标签
- 所有现代浏览器支持良好，旧版 IE8+ 也兼容
- 不加
fieldset不会让功能出错，但会降低可访问性和表单结构清晰度
实操建议：
- 当一组单选按钮有明确标题（如“请选择支付方式”）时，优先包在
fieldset里 -
legend内容要简短准确，别写“选项区”这种无效信息 - 不要为了“看起来整齐”而滥用
fieldset，它本质是语义容器，不是布局工具
name属性，其他都是围绕它做的体验加固。最容易被忽略的是大小写和空格——它们不报错、不警告，却让互斥逻辑彻底失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
