HTML单选按钮

单选按钮在网页中很常见。例如《HTML <input>标签》中的性别字段，用户只能选择男或女中的一种，此时选用单选按钮再合适不过了。

在 HTML 中，把 <input> 标签的 type 属性设置为 radio 可以表示单选按钮。具体语法格式如下：

同单行文本框和密码框一样，单选按钮要想被正确提交，也必须设置 name 属性。除了 name 属性之外，单选按钮还有几个其它属性，我们来看一下。

1. 单选按钮其它属性

1) checked属性

checked 属性用来设置页面加载时单选按钮的选中状态。当属性值为“checked”时，单选按钮会被选中。下面我们通过一个简单的示例来进行演示： 

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post" name="formName">
       性别：<input type="radio" name="girl" checked="checked">女
       <input type="radio" name="boy" checked="checked">男
</form>

运行结果如图所示：

图1：同时被选中的单选按钮

注意：当 type 属性值为 radio 时，name 属性值必须保持一致。本例只是为了演示问题才会为所有按钮加checked="checked"属性，在实际开发中不会这样写。checked="checked"可以简写为 checked。

2) name属性

上述代码因为 name 属性值不同，两个单选按钮被同时选中。接下来我们就来看一下当 name 属性值相同时，给两个按钮都设置选中，会产生什么效果：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post" name="formName">
       性别：<input type="radio" name="sex" checked>女
       <input type="radio" name="sex" checked>男
</form>

运行结果如图所示：

图2：单选按钮

3) value属性

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post" name="formName">
       性别：<input type="radio" name="sex" value="girl">女
       <input type="radio" name="sex" value="boy" checked="checked">男
</form>

运行效果如图所示：

图3：带属性值的单选按钮

4) id属性

在为单选按钮设置 id 属性时，一般有 3 种用途：

• 配合 <label> 标签使用；
• 通过 JavaScript 获取元素，对元素进行一系列操作；
• 通过 CSS 选择元素，为其添加样式。

本节中，我们将讲述第一种。那么我们就来看一下 id 属性是如何与 <label> 标签配合使用的：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post" name="formName">
        性别：<input type="radio" name="girl" value="girl" id="girl"><label for="girl">女</label>
        <input type="radio" name="girl" value="boy" id="boy" checked="checked"><label for="boy">男</label>
</form>

通过以上代码可以发现，<label> 标签中的 for 属性与 <input> 元素的 id 属性值相同，我们可以说它们之间进行了一个绑定。那么 <label> 标签到底是用来做什么的呢？

<label> 标签主要用来为 <input> 元素定义标记，又因为 <label> 标签中的 for 属性可以与 <input> 元素的 id 属性进行绑定，所以当点击 <label> 标签中的内容（<label for="girl">女</label>）时，也相当于对 <input> 中的元素（<input type="radio" name="girl" value="girl" id="girl">）进行了点击。运

行结果如下图所示：

图4：单选按钮

2. 总结

• 要想单选按钮被正确提交到后台，必须为每个字段设置 name 属性；
• 当 <input> 标签用作单选按钮时，其 name 属性值必须相同，这样浏览器才会认为是同一个字段，从而实现单选效果；
• value 属性值不会显示在页面上，但是在提交数据时，后台接收的是我们设置的 value 属性值；
• <label> 标签用来为 <input> 元素定义标记，当 <label> 标签中的 for 属性与 <input> 元素的 id 属性绑定时，点击 <label> 标签中的内容，也相当于点击了 <input> 中的元素。