网站设计form表单-单选按钮代码示例教程

单选按钮（radio button)表单控件同复选框的行为非常相似，但在一组单选按钮中用户只能选择其中一个。通过把<input)标签的type属性设置为radio,就可以创建一个单选按钮。如同复选框控件一样。每个单选按钮都需要一个name和value属性。具有相同名称的单选按钮会在同一个组中。如果在checked属性中没置了该组中的某个元素，就意味着该按钮在开始时处于选中状态。如果没有选中这一组中的元素，浏览器会自动选定这一组中的首先个元素。

应该为每个单选按钮元素都设置一个不同的值，这样在提交表单之后，表单处理服务器就可以为它们自动分类。

下面的代码是将前面的示例用HTML进行了重新编写，这样就只能选择一种动物作为自己喜欢的宠物，效果如下图：

代码如下：

<form>

你喜欢哪一种宠物？

<p>

      <input type=radio name=favorite value="狗">狗

      <input type=radio checked name=favorite value="猫">猫

      <input type=radio name=favorite value="鸟">鸟

      <input type=radio name=favorite value="鱼">鱼

</form>

同前面的复选框示例一样，我们把全部的爱心都给了猫科，把“猫”的单选按钮作为默认选择。如果选择了另外一个单选按钮，例如鸟，浏览器就会自动取消对“猫”的选择。如果这就是你的选择的话，那么当用户将表单提交给服务器时，浏览器就会在表单参数列表中的favorite属性中只包括一个值，favorite=鸟在一组单选按钮中总是要选择一个控件，所以只创建一个单选按钮毫无意义;它们应该在文档中以一组包括两个或多个按钮的形式出现(可以将复选框用于表单控件的ON/OFF和YES/NO类型)。