单选按钮组必须使用相同name属性，且需显式绑定label、用Flex布局排版、自定义样式时同步处理所有状态。name不一致会导致后端仅收最后一项；无label绑定影响可访问性；硬编码间距适配差；隐藏原生控件后未重置:checked等状态将导致交互失效。
单选按钮组必须用相同 name，否则后端收不到完整选项
浏览器只把 name 相同的 <input type="radio"> 当作一组，用户只能从中选一个；如果漏改或拼错 name（比如写成 q1 和 Q1），它们就变成独立控件，后端可能只收到最后一个被点击项的值，甚至整个字段消失。
常见错误包括：
- 复制粘贴时没统一修改
name，导致两道题共用一个名字 - 用中文、空格或特殊符号命名，如
name="喜欢的颜色"，后端解析失败 - 误把单选题写成多个
type="checkbox"，再靠 JS 强制“单选”，失去语义和无障碍支持
正确写法示例：<input type="radio" name="gender" value="male"><label for="male">男</label><input type="radio" name="gender" value="female"><label for="female">女</label>
单选选项必须显式绑定 label，不能只靠视觉对齐
只把文字和 <input> 并排放，点击文字不会聚焦或选中控件——这对触屏用户、键盘 Tab 导航和屏幕阅读器都不友好。必须用 for 属性指向唯一 id，或把 <input> 套进 <label> 里。
立即学习“前端免费学习笔记（深入）”；
注意点：
-
id值必须全页唯一，重复会导致部分label失效 -
for只认id，不能用class替代 - 若用
aria-hidden="true"或hidden属性隐藏控件，label也会被读屏器忽略
横向排版用 display: flex，别靠 <br> 或 margin 硬调
纯靠换行、空格或固定 margin 控制单选按钮间距，一换设备或字体就错位。移动端优先建议用 Flex 布局，配合 gap 统一控制间隔。
推荐 CSS 写法：
fieldset {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
fieldset label {
display: flex;
align-items: center;
cursor: pointer;
}
这样既能保证点击区域覆盖文字+圆圈，又能在小屏自动换行，避免溢出。
禁用默认圆圈样式后，checked 状态容易丢失
很多人用 appearance: none 隐藏原生圆圈再自定义样式，但忘了重置 :checked 的伪类状态，结果用户点了没反馈，或者“已选中”状态不显示。
关键点：
- 必须同时定义
input[type="radio"]:checked + label::before或类似规则来标记选中态 - 若用 JS 动态设置
checked，要确保 DOM 更新后样式能响应（避免用display: none隐藏原生控件） - 禁用状态（
disabled）也要单独写样式，否则自定义图标可能看起来仍可点
真正难的不是怎么画个好看的圆圈，而是让所有状态（未选/已选/禁用/焦点/读屏器识别）都同步且稳定——这点常被跳过，直到测试阶段才暴露。
