radio单选框的value属性仅用于提交数据，不可作为显示文本；显示文字必须通过label标签实现，推荐用for/id关联或直接包裹input，确保可访问性和多语言支持。
radio单选框的文本和值必须分开设置
HTML 中 <input type="radio"> 本身不包含显示文本，它的 value 属性只用于提交数据，**不能直接当展示文字用**。想让单选框旁边显示“男”“女”“其他”，得靠外部文本配合 —— 最稳妥的方式是用 <label></label> 包裹或关联 input。
用 label for 关联 radio（推荐，语义清晰）
这是最常用也最健壮的做法：把 input 和 label 分开写，用 id/for 绑定。用户点击文字或小圆圈都能触发选中，无障碍支持也好。
<input type="radio" name="gender" id="gender-male" value="male"> <label for="gender-male">男</label> <input type="radio" name="gender" id="gender-female" value="female"> <label for="gender-female">女</label> <input type="radio" name="gender" id="gender-other" value="other"> <label for="gender-other">其他</label>
注意点：
-
name必须相同，否则它们就不属于同一组单选逻辑 -
id和for的值要严格一致（大小写敏感） -
value建议用英文或简短标识符，别写“男”，否则后端收不到结构化数据
用 label 包裹 input（简洁但有布局限制）
如果结构允许，直接把 input 塞进 label 里，省去 id/for 配对，代码更短：
立即学习“前端免费学习笔记（深入）”；
<label> <input type="radio" name="level" value="beginner"> 入门 </label> <label> <input type="radio" name="level" value="intermediate"> 进阶 </label>
好处是不易配错；缺点是默认会把文字和控件挤在一行，若需换行或复杂排版（比如图标+文字+说明），就得额外加 CSS 控制 display 或 flex。
常见错误：把 text 写进 value 属性里
有人会这么写：<input type="radio" name="color" value="红色"> 红色 —— 这会导致两个问题：
- 提交到后端的
value是中文，难做枚举判断、数据库字段设计也不友好 - 如果页面需要多语言，改文本就得动 HTML 结构，而不是只换文案
- 没有
label关联，点击文字无法选中，可访问性差
真正该做的，是让 value 保持机器友好的标识（如 "red"），展示文本由 label 独立承担。
别忽略 label 的存在 —— 它不是装饰，而是让 radio 可用、可维护、可翻译的关键一环。
