16.9　创建单选按钮

还记得老式汽车收音机上那些大大的黑色塑料按钮吗？按下其中的一个可以收听WFCR；按下另一个可以收听WRNX。不过，不可以同时按下两个按钮。单选按钮也遵循同样的工作方式（只是它们的用途不是听收音机），如图16.9.1、图16.9.2和图16.9.3所示。

创建单选按钮的步骤

• 如果需要，输入单选按钮的介绍文本。例如，可以使用“选择下列选项中的一个”。

• 输入。

• 输入name="radioset"，这里的radioset用于识别发送至脚本的数据，同时用于将多个单选按钮联系在一起，确保同一组中最多只有一个被选中。

• 输入id="id"，这里的id用于让对应的标签识别该单选按钮。同一组单选按钮的name值都是相同的，但同一页面中每个元素的id必须是唯一的。

• 输入value="data"，这里的data是该单选按钮被选中（无论是被默认选中还是被访问者选中）时要发送给服务器的文本（如图16.9.3所示）。

• 如果需要，输入checked="checked"让该单选按钮在页面打开时默认处于激活状态。在一组单选按钮中，只能对一个按钮添加这一属性。（在HTML中，="checked"是可选的。）

• 输入/>。

• 输入radio label，其中，id与单选按钮中的id值相同，radio label则用于让访问者识别该单选按钮。radio label的值通常与value的值相同，但这并不是必需的。

• 对同一组内的所有单选按钮，重复第2步至第8步。

<fieldset class="radios">
<ul>
     <li>
        <input type="radio" id="gender_male" name="gender" value="male" />
        <label for="gender_male">Male</label>
     </li>
     <li>
        <input type="radio" id="gender_female" name="gender" value="female" />
        <label for="gender_female">Female </label>
     </li>
</ul>
</fieldset>

图16.9.1　对于单选按钮，name属性有双重功能：将同一组的单选按钮联系在一起，并在将值发送至脚本时对其进行识别。value是很重要的，因为对于单选按钮访问者无法输入值

.radios {
     background: none;
     display: inline;
     margin: 0;
     padding: 0;
}
.radios ul {
     border: none;
     display: inline-block;
     list-style: none;
     margin: 0;
     padding: 0;
}
.radios li {
     margin: 0;
     display: inline-block;
}
.radios label {
     margin-right: 25px;
     width: auto;
}
.radios input {
     margin-top: 3px;
}

图16.9.2　这段CSS可以让无序列表中的项目水平排列。标签拥有25像素的右侧外边距，从而对不同的单选按钮（及标签）进行分隔（如图16.9.3所示）

图16.9.3　单选按钮本身是用input元素创建的；标签（Male和 Female）是用label元素创建的。点击标签会选中对应的单选按钮

提示　如果不设置value属性，就会向脚本发送on。这并不是特别有用，因为你无法判断哪个按钮是被选中的。