在网页开发中，HTML 的表单元素是实现用户交互的重要工具。其中，`` 是一种常见的单选按钮控件，用于让用户从多个选项中选择一个。虽然其基本用法相对简单，但掌握其正确使用方式对于提升用户体验和表单数据处理的准确性至关重要。
一、基本结构
`` 元素的基本语法如下：
```html
```
- `type="radio"`：表示这是一个单选按钮。
- `name` 属性：用于将多个单选按钮分组，确保同一组内只能选择一个选项。
- `value` 属性：当用户选择该选项时，提交到服务器的数据值。
例如，以下代码创建了两个单选按钮，分别代表“男”和“女”：
```html
```
二、默认选中状态
可以通过添加 `checked` 属性来设置某个单选按钮为默认选中状态：
```html
红色
蓝色
```
此时，“红色”选项会自动被选中，用户无需手动点击。
三、与 `
为了提高可访问性和用户体验，通常会将 `` 与 `
```html
```
这种方式不仅提升了界面美观度，还增强了可用性。
四、JavaScript 控制
除了静态 HTML，也可以通过 JavaScript 动态控制单选按钮的状态。例如，根据用户输入或其他条件改变选中项：
```javascript
document.querySelector('input[value="medium"]').checked = true;
```
或者监听单选按钮的变化事件：
```javascript
document.querySelectorAll('input[name="size"]').forEach(radio => {
radio.addEventListener('change', function() {
alert('你选择了：' + this.value);
});
});
```
五、注意事项
1. name 属性必须一致：同一组的单选按钮必须具有相同的 `name` 值，否则无法实现互斥选择。
2. 避免重复 value 值：不同组的单选按钮可以有相同的 `value`，但应尽量保持唯一以避免混淆。
3. 表单提交：当表单提交时，只有被选中的单选按钮的值会被发送到服务器。
六、常见问题解答
Q：如何判断哪个单选按钮被选中？
A：可以通过遍历所有同名的单选按钮，并检查它们的 `checked` 属性是否为 `true`。
Q：能否禁用某些单选按钮？
A：是的，可以通过添加 `disabled` 属性来禁用特定的单选按钮。
```html
激活
```
结语
`` 是 HTML 表单中不可或缺的一部分，合理使用它可以有效提升用户的操作体验和数据采集的准确性。无论是基础的表单设计，还是复杂的交互逻辑，掌握其使用方法都是前端开发者必备的技能之一。通过结合 HTML、CSS 和 JavaScript，可以进一步增强其功能和表现力，打造更加友好和高效的用户界面。
