HTML单选按钮用实现，必须同name值成组、设value值、用checked设默认项，并配合label提升体验；name不一致或value含中文/为空会导致逻辑失效。
HTML 单选按钮怎么写 <input type="radio">
单选按钮必须成组出现，靠 name 属性绑定为同一逻辑选项；没设 name 或值不同，浏览器就当它们互不相干，根本没法“单选”。
常见错误现象：点击一个，其他不自动取消、提交后只拿到空值或 undefined，八成是 name 拼错、大小写不一致，或者漏写了。
-
name值必须完全相同（包括空格和大小写），例如都用gender，不能一个写Gender一个写gender - 每个
<input type="radio">必须配value，表单提交时传的就是这个值，不是显示文字 - 用
checked属性设默认选中项，最多只能有一个checked出现在同名组里 - 建议搭配
<label></label>使用，点击文字也能触发，体验更好且可访问性达标
<label><input type="radio" name="level" value="junior" checked> 初级</label><br><label><input type="radio" name="level" value="senior"> 高级</label>
为什么 value 不能空、也不能用中文？
value 是后端真正接收的字段值，空字符串或含空格/中文的 value 容易在 URL 编码、JSON 解析、数据库入库时出问题，比如变成 %E4%B8%AD%E6%96%87 或被截断。
使用场景：后端通常按约定处理固定英文标识，如 status=active、theme=dark，而不是 status=启用。
立即学习“前端免费学习笔记（深入）”；
- 避免用
value="是"或value="男"，改用value="yes"、value="male" - 如果必须映射中文含义，用前端 JS 或后端做一次转换，别让
value承担语义 - 空
value=""提交后可能被某些框架忽略，或导致校验失败
怎么让单选按钮默认不选中、也不允许跳过？
HTML 本身不支持“禁止未选”校验，required 属性对单选组有效，但前提是所有同名 <input> 都在同一表单内且没设 checked。
容易踩的坑：required 加在第一个 radio 上没用，必须加在**任意一个同名 radio 上即可生效**；但如果已经写了 checked，那 required 就形同虚设。
- 要强制选择：去掉所有
checked，并在任一<input type="radio">上加required - 提交时若未选，浏览器会弹原生提示（如“请从下列选项中选择一项”），文案不可自定义
- 注意 Safari 旧版本对
required+ radio 支持不稳定，必要时加 JS 校验兜底
多个单选组混在一起，怎么避免互相干扰？
靠 name 隔离——不同业务字段必须用不同 name，哪怕结构一样。比如 color 和 size 各自一组，不能共用 name="option"。
性能影响很小，但混淆 name 会导致提交数据错乱，后端拿到 color=large&size=red 这种荒谬组合。
- 命名建议带业务前缀，如
user_role、payment_method，别用泛泛的choice、select - 动态生成时注意模板变量拼接正确，比如
name="{{ group }}_id"要确保group实际值不为空或重复 - 调试时看浏览器开发者工具的 Network → Form Data，确认键名和值是否符合预期
最常被忽略的是 name 的一致性——它不像 class 或 id 那样能靠样式或脚本补救，一旦写错，单选逻辑就彻底失效，而且不容易一眼看出来。
