name属性决定单选逻辑，必须完全一致（如全小写+短横线）；value必须显式设置以提交有效数据；checked控制默认选中；label须用id/for关联或嵌套以保障可访问性；required只需加在同名radio任一元素上。
name 属性决定单选逻辑是否生效
浏览器只靠 name 判断哪些 <input type="radio"> 属于同一组。同组才能互斥，否则多个都能被选中——这不是 bug，是预期行为。
常见错误现象：<input type="radio" name="gender"> 和 <input type="radio" name="Gender"> 看似一样，但大小写不同就分属两组；空格、下划线差异也会导致分组失败。
-
name值必须完全一致（字符级相等），建议全小写+短横线，如user-preference - 服务端接收时，也只认这个
name作为字段名，比如 PHP 的$_POST['user-preference'] - 不要用动态拼接的
name（如name="opt_{$i}"）来试图“隔离”单选框，这会直接破坏单选逻辑
value 和 checked 配合才能提交有意义的数据
value 是表单提交时真正发给后端的值，不是界面上显示的文字；checked 控制默认选中，且同一 name 组里只能有一个生效。
容易踩的坑：写了 checked 却没设 value，结果后端收到空字符串或 on（旧浏览器默认值）；或者多个同名 radio 都加了 checked，但只有最后一个生效（覆盖逻辑）。
立即学习“前端免费学习笔记（深入）”；
-
value必须明确设置，推荐用语义化短字符串，如value="dark"、value="subscribe" -
checked是布尔属性，写成checked或checked="checked"效果相同，前者更简洁 - 若需 JS 动态设默认项，别用
.setAttribute('checked', 'checked')，应改用.checked = true，否则可能不触发表单状态更新
label 标签不是可选，而是必须搭配使用的访问性基础
仅靠 <input type="radio"> 文字紧挨着写，用户无法点击文字区域选中——这不是样式问题，是 HTML 结构缺失。
正确做法是用 id + for 关联，或把 input 包进 label 内。前者兼容性更好，后者写法更紧凑。
- 每个
input必须有唯一id，比如id="theme-light"，对应<label for="theme-light">浅色主题</label> - 不要复用
id，哪怕只是测试代码，重复id会让for失效，屏幕阅读器也无法准确定位 - 禁用状态（
disabled）下，关联的label点击也无效，这是正确行为，无需额外处理
required 和 disabled 要按场景谨慎使用
required 表示该组至少要选一个，但它只校验「有没有选」，不校验「选的是哪个」；disabled 会让该选项既不可点也不参与提交。
典型误用：给整组 radio 都加 required，其实只要加在一个上即可（浏览器自动识别同名组）；或对某个 radio 加 disabled 后，忘了它不会出现在 POST 数据里，导致后端逻辑报错。
-
required只需加在任意一个同名 radio 上，例如<input type="radio" name="plan" value="pro" required> -
disabled会跳过验证且不提交，如果只是想视觉灰掉但保留数据，改用readonly不起作用（radio 不支持readonly），得用 CSS + JS 模拟 - 移动端 Safari 对
required的提示较弱，建议配合 JS 做二次校验或显式错误提示
name 的一致性检查和 value 的显式赋值——它们不报错，但一上线就导致后端收不到值或逻辑错乱。 
