编辑“︁HTML单选按钮”︁（章节）

= HTML单选按钮 =

'''HTML单选按钮'''（Radio Button）是HTML表单中的一种输入控件，允许用户从一组选项中选择'''唯一一个'''选项。单选按钮通常用于需要'''互斥选择'''的场景，例如性别选择、问卷调查中的单选题等。

== 基本语法 ==
HTML单选按钮使用<code><nowiki><input type="radio"></nowiki></code>元素创建。多个单选按钮通过相同的<code>name</code>属性形成一组互斥选项。

=== 示例代码 ===
<syntaxhighlight lang="html">
<form>
    <p>请选择您的性别：</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">其他</label>
</form>
</syntaxhighlight>

'''输出效果'''：
<form>
    <p>请选择您的性别：</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">其他</label>
</form>

== 关键属性 ==
{| class="wikitable"
|+ 单选按钮重要属性
! 属性 !! 描述 !! 示例
|-
| <code>name</code> || 定义单选按钮组的名称（必须相同才能形成互斥） || <code>name="gender"</code>
|-
| <code>value</code> || 提交表单时发送到服务器的值 || <code>value="female"</code>
|-
| <code>checked</code> || 设置默认选中项 || <code>checked</code>
|-
| <code>disabled</code> || 禁用单选按钮 || <code>disabled</code>
|}

== 分组原理 ==
单选按钮通过<code>name</code>属性实现分组。浏览器会确保同一组（相同name）中只能选择一个选项。

<mermaid>
flowchart TD
    A[单选按钮1 name="group1"] --> B{互斥选择}
    C[单选按钮2 name="group1"] --> B
    D[单选按钮3 name="group2"] --> E{独立选择}
</mermaid>

== 高级用法 ==

=== 默认选中 ===
使用<code>checked</code>属性设置默认选项：
<syntaxhighlight lang="html">
<input type="radio" id="opt1" name="options" value="1" checked>
<label for="opt1">默认选项</label>
</syntaxhighlight>

=== 与<label>关联 ===
推荐使用<code><label></code>元素提高可访问性：
* 点击标签文字也能选中按钮
* 屏幕阅读器能正确识别

=== 动态处理 ===
JavaScript获取选中值示例：
<syntaxhighlight lang="javascript">
document.querySelector('input[name="gender"]:checked').value;
</syntaxhighlight>

== 实际应用案例 ==
'''用户注册表单'''中的性别选择：
<syntaxhighlight lang="html">
<form action="/register" method="post">
    <fieldset>
        <legend>个人信息</legend>
        <div>
            <p>性别：</p>
            <input type="radio" id="reg-male" name="user_gender" value="M" required>
            <label for="reg-male">男性</label>
            
            <input type="radio" id="reg-female" name="user_gender" value="F">
            <label for="reg-female">女性</label>
            
            <input type="radio" id="reg-unspecified" name="user_gender" value="U">
            <label for="reg-unspecified">不愿透露</label>
        </div>
    </fieldset>
</form>
</syntaxhighlight>

== 数学表示 ==
单选按钮组可以表示为互斥事件集合：
<math>
P(A \cap B) = 0 \quad \text{当} \quad A \neq B
</math>
其中A和B代表不同的单选选项。

== 浏览器兼容性 ==
所有现代浏览器都完全支持单选按钮，包括：
* Chrome 1+
* Firefox 1+
* Safari 1+
* Edge 12+
* Opera 6+

== 最佳实践 ==
1. 始终为每组单选按钮提供默认选择（使用<code>checked</code>）
2. 使用<code><fieldset></code>和<code><legend></code>组织相关选项
3. 移动设备上确保点击区域足够大
4. 遵循WCAG可访问性指南：
   * 每个单选按钮必须有对应的<code><label></code>
   * 避免使用CSS完全隐藏原生控件

== 常见问题 ==

'''Q: 如何让多个单选按钮组共存？'''
A: 为不同组使用不同的<code>name</code>属性。

'''Q: 单选按钮和复选框有什么区别？'''
A: 复选框允许多选，而单选按钮强制单选择。

'''Q: 为什么我的单选按钮不互斥？'''
A: 检查所有相关按钮是否具有完全相同的<code>name</code>属性值。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]