- A+
单选按钮（Radio Button）在HTML表单中用于让用户从多个选项中选择一个。正确创建和分组单选按钮，能确保用户只能选中同一组中的一个选项。
创建基本的单选按钮
使用 <input> 标签并设置 type 属性为 "radio" 来创建单选按钮。每个按钮应配有对应的 label，提升可访问性和用户体验。
示例：
<input type="radio" id="option1" name="color" value="red">
<label for="option1">红色</label>
<input type="radio" id="option2" name="color" value="blue">
<label for="option2">蓝色</label>
说明：
- id：唯一标识每个单选按钮，与 label 的 for 属性对应。
- name：相同 name 值的 radio 按钮属于同一组，只能选一个。
- value：提交表单时发送的数据值。
通过name属性实现分组
单选按钮的分组依赖于 name 属性。只要多个 radio 按钮的 name 相同，它们就会被浏览器视为一组，用户从中只能选择一项。
立即学习“前端免费学习笔记（深入）”；
专为短片创作者打造的AI创作平台
279
查看详情
示例：两组不同的单选按钮
<!-- 颜色选择组 -->
<input type="radio" name="color" value="red"> 红<br>
<input type="radio" name="color" value="green"> 绿<br>
<!-- 尺寸选择组 -->
<input type="radio" name="size" value="s"> 小号<br>
<input type="radio" name="size" value="m"> 中号
这两组互不影响，用户可分别在“颜色”和“尺寸”中各选一个。
设置默认选中项
添加 checked 属性可让某个单选按钮默认被选中。
示例：
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女
页面加载时，“男”选项会自动处于选中状态。
提升可读性与可用性的建议
- 始终用 label 包裹文字或使用 for 关联，方便点击文本也能选中按钮。
- 将相关的一组 radio 按钮放在同一个 fieldset 内，并用 legend 说明分组标题。
- 避免重复的 name 值造成意外分组错误。
- 在后端或前端验证是否已选择有效值，因为默认可能无选项被选。
基本上就这些。合理使用 name 分组、label 关联和 checked 默认，就能创建清晰可用的单选按钮。不复杂但容易忽略细节。
