单选按钮组必须用相同name属性才能实现互斥；name值应语义化，每个radio需配label，至少设一个checked，推荐用fieldset+legend语义分组，value应为简洁标识符而非显示文本，移动端需扩大点击区域。
单选按钮组必须用 name 统一才能互斥
单选按钮（<input type="radio">）本身不会自动“一组互斥”，全靠 name 属性值相同来识别归属。如果漏写或写错 name，看起来是单选，实际能多选——这是零基础最常踩的坑。
实操建议：
-
name值建议用语义化英文，比如gender、plan，避免用radio1这类无意义命名 - 每个
<input>必须配一个<label></label>，且用for指向id，或把<input>包在<label></label>里——否则点击文字无法选中 - 至少设一个
checked，否则初始状态为空，用户可能误以为没选项可选
用 <fieldset></fieldset> + <legend></legend> 做语义化分组
单纯靠 name 能让逻辑互斥，但视觉和无障碍体验差。浏览器和读屏软件依赖 <fieldset></fieldset> 明确“这是一组相关选项”。不加它，代码能跑，但不符合基础可访问性要求。
实操建议：
-
<fieldset></fieldset>是容器，<legend></legend>是组标题，必须直接子元素，不能用<div> 或 <code><p></p>替代 - 如果不想显示默认边框，CSS 可以清掉：
fieldset { border: none; padding: 0; }，但别删标签本身 - 移动端小屏幕下，横向排布易折行混乱，优先用垂直排列（
display: block默认即可） -
value应该用简洁、无空格、无特殊字符的标识符，比如male、female、other，而不是中文或带空格的字符串 - 显示文案写在
<label></label>里：<label><input type="radio" name="gender" value="male"> 男</label> - 后端收到的是
gender=male，不是gender=男—— 这点在调试接口时经常被忽略 - 不要只调
width/height，那会拉伸圆圈本身；应该用margin或padding扩展周围空白 - 给
<label></label>设display: block和min-height: 44px（符合 iOS 触控最小尺寸） - 避免用
transform: scale()放大输入框，会破坏对齐，且部分安卓机型有渲染异常
value 值决定提交内容，不是显示文本
很多人以为 value="男" 就能让页面显示“男”，其实 value 只在表单提交时发给后端，界面上显示的是 <label></label> 里的文字。混淆这两者会导致后端收不到预期数据。
实操建议：
移动端点击区域太小？加 margin 和 min-height
原生 <input type="radio"> 在手机上点击热区极小，用户容易点歪。这不是 bug，是默认样式限制，必须手动扩大可点击范围。
实操建议：
复杂点在于：样式调整后要反复在真机上测点击反馈，模拟器容易误判。另外，所有单选按钮共用一个 name 是硬性前提，其他都是锦上添花——没这个，排版再好看也没用。
