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

单选按钮（Radio Button）在HTML表单中用于让用户从多个选项中选择一个。正确创建和分组单选按钮，能确保用户只能选中同一组中的一个选项。

创建基本的单选按钮

使用 标签并设置 type 属性为 "radio" 来创建单选按钮。每个按钮应配有对应的 label，提升可访问性和用户体验。

红色

蓝色

说明：

• id：唯一标识每个单选按钮，与 label 的 for 属性对应。
• name：相同 name 值的 radio 按钮属于同一组，只能选一个。
• value：提交表单时发送的数据值。

通过name属性实现分组

单选按钮的分组依赖于 name 属性。只要多个 radio 按钮的 name 相同，它们就会被浏览器视为一组，用户从中只能选择一项。

红

绿

小号

中号

这两组互不影响，用户可分别在“颜色”和“尺寸”中各选一个。

设置默认选中项

添加 checked 属性可让某个单选按钮默认被选中。

男

女

页面加载时，“男”选项会自动处于选中状态。

提升可读性与可用性的建议

• 始终用 label 包裹文字或使用 for 关联，方便点击文本也能选中按钮。
• 将相关的一组 radio 按钮放在同一个 fieldset 内，并用 legend 说明分组标题。
• 避免重复的 name 值造成意外分组错误。
• 在后端或前端验证是否已选择有效值，因为默认可能无选项被选。

基本上就这些。合理使用 name 分组、label 关联和 checked 默认，就能创建清晰可用的单选按钮。不复杂但容易忽略细节。