<think>我们被要求使用中文回答，并且需要遵循特定的格式要求，包括行内数学表达式使用$...$，独立公式使用$$...$$并单独成段。同时，需要生成相关问题，并在回答中引用的段落末尾添加引用标识。
用户的问题是关于
HTML中
radio标签的使用。根据提供的引用材料，我们可以总结如下：
引用[1]解释了为什么使用"
radio"这个词来表示单选框：源于收音机一次只能选择一个频道的物理特性，这种交互模式被借鉴到网页设计中，以降低用户学习成本。
引用[2]展示了在Struts框架中如何使用<s:
radio>
标签，包括value、name、list等属性。
引用[3]介绍了
HTML基本
标签，包括表单
标签和input
标签。
引用[4]给出了
HTML中
radio标签的基本用法：通过相同的name属性定义为一组，不同的value值来区分选项。
因此，我们可以组织回答如下：
1. 解释
radio标签的用途：用于创建单选按钮，用户只能从一组选项中选择一个。
2. 基本语法：使用<input type="
radio">
标签，并设置name和value属性。
3. 关键点：同一组单选按钮必须设置相同的name属性，不同的value属性。
4. 可选的属性：如checked（默认选中）、disabled（禁用）等。
5. 给出示例代码。
然后，根据要求生成相关问题。
注意：引用标识的添加，在引用了上述材料的地方末尾加上[^数字]。</think>###
HTML中
radio标签的使用指南
HTML中的
radio标签用于创建**单选按钮组**，用户只能从一组互斥选项中选择一个。其核心机制和用法如下：
#### 一、基本语法
```
html
<input type="
radio" name="组名" value="选项值"> 选项
标签
```
- **type="
radio"**：声明为单选按钮[^4]
- **name属性**：同一组单选按钮必须使用相同的`name`值，形成互斥关系[^2][^4]
- **value属性**：每个选项的提交值，需唯一（后台接收的数据）[^2][^4]
- **选项
标签**：显示在按钮旁的文本（如"男"、"女"）
#### 二、关键特性
1. **互斥选择**
同`name`的按钮自动形成单选组，选中新选项时原选择自动取消[^1]
```
html
<!-- 性别选择组 -->
<input type="
radio" name="gender" value="male"> 男
<input type="
radio" name="gender" value="female"> 女
```
2. **默认选中**
通过`checked`属性设置初始选中项：
```
html
<input type="
radio" name="payment" value="alipay" checked> 支付宝
```
3. **数据提交**
表单提交时，仅传递**被选中选项**的`value`值（未选中的不提交）[^4]
#### 三、完整示例
```
html
<form action="/submit">
<p>请选择最高学历：</p>
<input type="
radio" name="education" value="bachelor"> 本科
<input type="
radio" name="education" value="master"> 硕士
<input type="
radio" name="education" value="doctor"> 博士
<p>请选择支付方式：</p>
<input type="
radio" name="payment" value="wechat" checked> 微信支付
<input type="
radio" name="payment" value="credit"> 信用卡
<button type="submit">提交</button>
</form>
```
#### 四、设计原理
- **命名由来**：源自老式收音机（
Radio）的物理按钮——多个频道按钮中每次只能按下一个[^1]
- **对比复选框**：
-
Radio：单选（互斥）→ `name`相同
- Checkbox：多选 → `name`可不同[^1]
#### 五、注意事项
1. 必须为每个选项设置不同的`value`，否则后台无法区分选项[^4]
2. 移动端适配建议：增大`<label>`点击区域提升体验
```
html
<label>
<input type="
radio" name="color" value="red"> 红色
</label>
```
> 历史背景：早期网页设计借鉴物理设备的交互模式（如收音机单选按钮），通过熟悉概念降低用户学习成本[^1]。
扫一扫
3921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
