HTML单选按钮怎么用_HTMLradio单选按钮的创建与分组方法

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

单选按钮（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

专为短片创作者打造的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 默认，就能创建清晰可用的单选按钮。不复杂但容易忽略细节。

以上就是HTML单选按钮怎么用_HTMLradio单选按钮的创建与分组方法的详细内容，更多请关注php中文网其它相关文章！