单选按钮需用相同name值实现互斥，value唯一标识选项，至少一个checked确保默认选中，用label包裹提升可访问性，禁用disabled/readonly误用，移动端应扩大label点击区域。
性别单选按钮必须用 name 统一才能互斥
单选按钮（<input type="radio">）本身不会自动“单选”，全靠相同 name 值触发浏览器原生互斥逻辑。如果漏写或写错 name，比如三个按钮分别叫 gender1、gender2、gender3，用户就能全选——这不是 bug，是没按规范用。
实操建议：
-
name值保持一致且语义清晰，例如name="gender"，不要用name="sex"（易歧义）或name="userGender"（过长无必要） - 每个
input必须有唯一value，后端或 JS 读取时靠它区分选项，如value="male"、value="female"、value="other" - 至少设一个
checked（如checked="checked"或简写checked），否则初始状态为空，不符合表单可用性要求
用 <label> 包裹提升可点击区域和无障碍支持
只写 <input type="radio"> 加文字，点击文字无法选中——这是新手最常忽略的交互缺陷。正确做法是让文字成为 <label> 的一部分，或通过 for 属性绑定 id。
推荐直接包裹写法（简洁、不易出错）：
立即学习“前端免费学习笔记（深入）”；
<label><input type="radio" name="gender" value="male" checked> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> <label><input type="radio" name="gender" value="other"> 其他</label>
这种写法无需额外 id/for，点击文字或圆圈都生效，且屏幕阅读器能自然关联。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
避免使用 disabled 或 readonly 混淆语义
<input type="radio"> 不支持 readonly 属性（设了也无效），误加会导致调试困惑；而 disabled 会让该选项不可选且提交时被忽略——如果你只是想“默认不选但允许用户选”，就别加 disabled。
常见错误场景：
- 把“暂不填写”做成一个
value=""的 radio 并设checked：后端收到空字符串，难以区分“用户选了‘无’”还是“没选”。应改用<select>或显式提供value="not_specified" - 为“其他”选项配文本框却未做联动控制：用户选了“其他”但没填文本框，校验逻辑容易遗漏。需 JS 监听
change事件动态显示/隐藏并设required
移动端点击区域小？用 CSS 扩展实际可点范围
原生 radio 圆圈在手机上只有 ~12px，手指难精准点击。不能靠 JS 模拟点击，而应扩大其命中区域。
安全有效的做法：
- 给
label设display: block和足够内边距（如padding: 8px 12px），让整个标签区可响应 - 避免直接给
input设width/height：会破坏原生样式和可访问性 - 如需自定义圆圈样式，用
::before/::after伪元素覆盖，保留原input隐藏但可交互（position: absolute; opacity: 0）
真正麻烦的从来不是怎么画个圆圈，而是确保它在 iOS VoiceOver、Android TalkBack 下仍能被正确朗读和操作——所有视觉定制都得以不破坏 name/value/checked 这三个核心属性为前提。
