HTML 零基础教程

HTML 单选按钮

单选按钮（Radio Buttons）用于向用户展示一组互斥的选项。

与允许选择多个项目的复选框不同，单选按钮限制用户在提供的列表中只能选择一个选项。这使它们非常适合需要单一、明确选择的场景，例如选择支付方式、性别或回答多项选择题。

1. 理解单选按钮

单选按钮是通过将 <input> 元素的 type 属性设置为 "radio" 来创建的。

将单选按钮组合在一起并确保一次只能选择一个的关键在于 name 属性。共享相同 name 属性的单选按钮属于同一组，浏览器会自动强制执行该组内的单选行为。

1. name 属性：定义分组（核心概念）

name 属性对于单选按钮的功能至关重要。它在逻辑上连接了各个按钮，告诉浏览器它们属于同一套选项。

如果没有通用的 name，每个单选按钮将独立行动，允许用户同时选择多个选项，这违背了单选按钮的初衷。

1.1 正确示例：

<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

在这个例子中，所有三个按钮的 name 都是 "fav_language"。这告诉浏览器：这些是关于“最喜欢的语言”的不同选项，只能选一个。

1.2 错误示例：

<input type="radio" id="html" name="fav_language1" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language2" value="CSS">
<label for="css">CSS</label><br>

里每个按钮都有不同的 name 的值。结果是浏览器将它们视为独立选项，用户可以把它们全部选上。

1.3 value 属性：代表被选中的选项

value 属性指定了当表单提交且该单选按钮被选中时，将提交给服务器的数据。

为每个单选按钮提供有意义的 value 至关重要，因为这是服务器识别用户选择的方式。

示例解析：
在上面的正确示例中，如果用户选择了 "HTML" 并提交表单，服务器将接收到数据：fav_language=HTML。

1.4 id 和 for 属性：增强无障碍性

虽然这对于单选按钮的功能不是严格必需的，但 id 和 for 属性对于无障碍性 (Accessibility) 是必不可少的。

  • id：为每个单选按钮提供唯一标识符。
  • for：在 <label> 元素中使用，将标签与对应的单选按钮关联。

这种关联允许用户点击文字标签就能选中按钮，极大地提高了可用性（尤其是在手机上）。它还能帮助屏幕阅读器在按钮获得焦点时朗读标签文本。

<input type="radio" id="yes" name="newsletter" value="yes">
<label for="yes">是的，我想订阅新闻简报</label><br>

<input type="radio" id="no" name="newsletter" value="no">
<label for="no">不，谢谢</label>

1.5 checked 属性：设置默认选中

checked 属性可用于预先选中组中的某个单选按钮。这对于提供默认选项或记住用户之前的选择很有用。

注意：在一个组中，应该只有一个单选按钮拥有 checked 属性。

<input type="radio" id="small" name="size" value="small">
<label for="small">小号</label><br>

<input type="radio" id="medium" name="size" value="medium" checked>
<label for="medium">中号 (默认)</label><br>

<input type="radio" id="large" name="size" value="large">
<label for="large">大号</label>

页面加载时，“中号”选项会被自动选中。

2. 实战示例与演示

2.1 示例 1：选择支付方式

单选按钮常用于结账时选择支付方式。

<p>请选择支付方式：</p>

<input type="radio" id="credit_card" name="payment_method" value="credit_card">
<label for="credit_card">信用卡</label><br>

<input type="radio" id="paypal" name="payment_method" value="paypal">
<label for="paypal">PayPal</label><br>

<input type="radio" id="bank_transfer" name="payment_method" value="bank_transfer">
<label for="bank_transfer">银行转账</label>

2.2 示例 2：回答多项选择题

用于调查问卷或在线测试。

<p>法国的首都是哪里？</p>

<input type="radio" id="london" name="capital" value="london">
<label for="london">伦敦</label><br>

<input type="radio" id="paris" name="capital" value="paris">
<label for="paris">巴黎</label><br>

<input type="radio" id="berlin" name="capital" value="berlin">
<label for="berlin">柏林</label>

2.3 示例 3：收集用户反馈（满意度评分）

<p>您对我们的服务满意吗？</p>

<input type="radio" id="very_satisfied" name="satisfaction" value="very_satisfied">
<label for="very_satisfied">非常满意</label><br>

<input type="radio" id="satisfied" name="satisfaction" value="satisfied">
<label for="satisfied">满意</label><br>

<input type="radio" id="neutral" name="satisfaction" value="neutral">
<label for="neutral">一般</label>