HTML怎么制作单选按钮_HTMLradio类型input的单选项实现和分组方法-html教程-PHP中文网

HTML怎么制作单选按钮_HTMLradio类型input的单选项实现和分组方法

看不見的法師

发布： 2025-10-01 17:28:02

原创

764人浏览过

单选按钮通过input标签创建，需设置type="radio"且同组name属性相同以实现互斥选择，配合label提升可访问性，默认选中添加checked属性。

html怎么制作单选按钮_htmlradio类型input的单选项实现和分组方法

在HTML中，单选按钮通过 input 标签并设置 type="radio" 来创建。用户可以从一组互斥选项中选择一个选项。正确实现单选按钮的关键在于使用相同的 name 属性进行分组，确保同一组内只能选中一个。

创建单选按钮的基本语法

每个单选按钮由一个 input 元素和对应的 label 组成，推荐将 label 与 input 关联以提升可访问性。

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

说明：

type="radio"：定义这是一个单选按钮
id：唯一标识，用于与 label 关联
name：相同 name 的 radio 按钮属于同一组
value：提交表单时被发送的值
label 的 for 属性：关联对应 id 的 input，点击文字也能选中按钮

单选按钮的分组方法

要让多个单选按钮互斥（即只能选一个），必须将它们的 name 属性设为相同值。

女

上面两个按钮 name 都是 "gender"，所以用户只能选中“男”或“女”中的一个。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

不同组的单选按钮应使用不同的 name 值，否则会意外归入同一组。

设置默认选中项

使用 checked 属性可以让某个单选按钮默认被选中。

页面加载时，“同意”按钮会自动处于选中状态。

实际应用示例：性别选择表单

<form>
  <fieldset>
    <legend>请选择性别</legend>
    <input type="radio" id="male" name="gender" value="M" checked>
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="F">
    <label for="female">女</label><br>
    <input type="radio" id="other" name="gender" value="O">
    <label for="other">其他</label>
  </fieldset>
</form>

使用 fieldset 和 legend 可以更好地组织单选按钮组，提升语义化和可读性。

基本上就这些。只要 name 相同就能分组，搭配 label 使用更友好，加 checked 可设默认值。不复杂但容易忽略细节。

以上就是HTML怎么制作单选按钮_HTMLradio类型input的单选项实现和分组方法的详细内容，更多请关注php中文网其它相关文章！