HTML单选按钮的用法_HTML radio单选按钮分组与默认选中

单选按钮通过name属性实现分组，相同name的选项互斥，用户只能选择一项；使用checked属性设置默认选中项，并推荐结合label标签提升可访问性与用户体验。

HTML中的单选按钮（radio button）用于让用户在一组互斥选项中选择一项。用户只能从同一组中选择一个选项，这就是所谓的“单选”。

radio单选按钮的基本语法

使用 <input type="radio"> 创建单选按钮。每个按钮通常配合一个 <label> 标签，提升可访问性和用户体验。

<input type="radio" name="gender" value="male"><label>男</label><br>
<input type="radio" name="gender" value="female"><label>女</label>

name 属性 是关键：只有 name 相同的 radio 按钮才会被归为一组，从而实现单选效果。不同 name 的按钮互不影响。

通过 name 属性实现分组

如果多个 radio 按钮的 name 值相同，浏览器会自动将它们视为一组，用户只能选中其中一个。

立即学习“前端免费学习笔记（深入）”；

例如以下两组性别和年龄段选择：

<!-- 性别组 --><br>
<input type="radio" name="gender" value="male"><label>男</label><br>
<input type="radio" name="gender" value="female"><label>女</label><br><br><p><!-- 年龄组 --><br>
<input type="radio" name="age" value="under18"><label>18岁以下</label><br>
<input type="radio" name="age" value="18-60"><label>18-60岁</label><br>
<input type="radio" name="age" value="over60"><label>60岁以上</label></p>

这两组分别独立操作，互不干扰。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

设置默认选中项

使用 checked 属性可以让某个单选按钮在页面加载时默认被选中。

只需要在希望默认选中的 <input> 标签中添加 checked 或 checked="checked" 即可。

<input type="radio" name="color" value="red"><label>红色</label><br>
<input type="radio" name="color" value="blue" checked><label>蓝色</label><br>
<input type="radio" name="color" value="green"><label>绿色</label>

此时，“蓝色”选项会默认被选中。注意：同一组中只应有一个按钮设置 checked，否则最后一个会生效。

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

• 始终为 radio 搭配 <label>，并使用 for 属性关联 id，点击文字也能选中按钮。
• 示例：<input type="radio" id="male" name="gender" value="male"><label for="male">男</label>
• 避免同一组中多个 checked，防止逻辑混乱。
• 服务端获取数据时，根据 name 获取对应 value，前端可通过 JavaScript 获取选中值。

基本上就这些。掌握 name 分组和 checked 默认选中，就能正确使用 HTML 单选按钮了。

以上就是HTML单选按钮的用法_HTML radio单选按钮分组与默认选中的详细内容，更多请关注php中文网其它相关文章！