单选按钮通过相同name属性分组,确保每组仅选一项,配合label提升可访问性,默认选中用checked,合理使用可创建清晰可用的表单。

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











