网页设计中radio是什么意思

radio 是 "Radio Button"（单选按钮）的简称，它是网页表单中一种常见的交互元素，用于让用户从一组选项中只能选择一个。

这个名字来源于老式收音机上的物理按钮——当你按下一个按钮时，之前按下的那个按钮会自动弹出来，同样，在网页上，当你选中一个单选按钮时，同组中的其他单选按钮会自动取消选中。

单选按钮的核心特点

理解单选按钮的关键在于它的两个核心特性：

1. 互斥性：这是最重要的特性，在一组单选按钮中（即它们共享同一个 name 属性），用户只能选择其中一个，选择任何一个新的选项，都会自动取消之前选中的选项。
2. 必须选择其一：单选按钮组会预设一个默认选项，或者要求用户必须选择一个才能提交表单（例如性别选择、服务类型等）。

单选按钮的视觉表现

在网页上,单选按钮通常由两部分组成：

• 一个小圆圈：这是按钮本身，代表“未选中”或“已选中”状态。
  • 未选中：空心圆圈 ( ○ )
  • 已选中：实心圆点 ( ● )
• 一个文本标签：紧挨着小圆圈，描述该选项的含义，点击这个标签通常也能选中对应的单选按钮，这提供了更好的用户体验。

如何在 HTML 中创建单选按钮

在 HTML 中，单选按钮使用 <input> 标签，并设置 type="radio"，为了让一组单选按钮具有“互斥性”，它们必须共享同一个 name 属性。

下面是一个完整的代码示例：

<form>
  <fieldset>
    <legend>请选择您的性别：</legend>
    <!-- 男性选项 -->
    <label>
      <input type="radio" name="gender" value="male"> 男
    </label>
    <!-- 女性选项 -->
    <label>
      <input type="radio" name="gender" value="female"> 女
    </label>
    <!-- 其他选项 -->
    <label>
      <input type="radio" name="gender" value="other"> 其他
    </label>
    <!-- 默认选中的选项 -->
    <label>
      <input type="radio" name="gender" value="prefer_not_to_say" checked> 不愿透露
    </label>
  </fieldset>
</form>

代码解析：

• <input type="radio">: 声明这是一个单选按钮。
• name="gender": 这是关键！ 所有性别选项的 name 都设为 gender，浏览器就知道它们是一个“单选组”，只能选一个。
• value="male": 当用户选中这个选项并提交表单时，实际发送给服务器的值是 "male"。
• checked: 这是一个布尔属性，当它存在时，表示该单选按钮在页面加载时就被默认选中，在一个组中，通常只有一个选项有 checked 属性。
• <label>: 标签元素，将 <input> 放在 <label> 内部，或者用 for 属性关联它们（<label for="male">男</label> 和 <input id="male" ...>），这样用户点击文字“男”时，也能选中单选按钮。

单选按钮 vs. 复选框

这是新手最容易混淆的地方,下面是单选按钮和复选框 的核心区别：

何时使用单选按钮？

当你需要用户从多个互斥的选项中做出唯一选择时，就应该使用单选按钮，常见场景包括：

• 个人资料：性别、出生年份、血型。
• 调查问卷：满意度评价（非常满意、满意、一般、不满意）。
• 设置选项：主题颜色（浅色、深色）、页面布局（左对齐、居中）。
• 购物流程：配送方式（标准快递、加急快递、到店自提）。

在网页设计中,radio 指的就是单选按钮，它是一种基础但至关重要的表单控件，其核心功能是让用户在一组选项中进行唯一选择，通过理解它的互斥性、HTML 实现方式以及与复选框的区别，你就能在合适的场景下正确地使用它，从而设计出更直观、易用的用户界面。