HTML中定义单选按钮

减小字体

增大字体作者：本站来源：本站整理发布时间：2023-07-18 12:57:56

在HTML中使用<input type="radio">来定义一个单选按钮。一般单选按钮控件需要由两个或两个以上单选按钮构成的集合来完成一定的工作。如在考试系统中，单选题中的四个选项构成一个单选按钮集合，在用户注册功能中，性别是由两个单选按钮表示的“男”和“女”构成的集合等。

HTML中单选按钮

单选按钮定义的一般形式

<input type="radio" name="r1" value="v1">

在上面定义的单选按钮中，type属性用于指定<input>的类型为"radio"，即单选按钮；

name属性除了用于服务器端获取单选按钮组中选中按钮的值之外，在这里还有对按钮分组的作用，即name属性值相同的视为一组，在选择时，name属性值相同的单选按钮之间是相斥的，亦即名称相同的单选按钮中只能选中一个。

value属性用于指定当前按钮代表的值。该值在选中时将传递到服务器端由程序脚本接收处理。

使用name属性定义单选按钮组

在HTML中，通过给单选按钮指定相同的name属性定义一个单选按钮组。在定义了单选按钮组后，处于同一单选按钮组的单选按钮只能有一个被选中。

在一个网页中，设计人员可以定义许多单选按钮组，这仅需要为不同的单选按钮组指定不同的name属性即可。

<form action="form_example.asp" method="post" id="form1">

 <p>我国的首都是：</p>

 <input type="radio" id="r1" name="sd" value="上海"><label for="r1">上海</label><br>

 <input type="radio" id="r2" name="sd" value="天津"><label for="r2">天津</label><br>

 <input type="radio" id="r3" name="sd" value="北京"><label for="r3">北京</label><br>

 <input type="radio" id="r4" name="sd" value="重庆"><label for="r4">重庆</label>

 <p>我国境内最长的河流是：</p>

 <label><input type="radio" id="r5" name="hl" value="黄河">黄河</label><br>

 <label><input type="radio" id="r6" name="hl" value="长江">长江</label><br>

 <label><input type="radio" id="r7" name="hl" value="松花江">松花江</label><br>

 <label><input type="radio" id="r8" name="hl" value="珠江">珠江</label>

</form>

其显示效果如下图所示：

HTML 为单选按钮分组

本例给出了两个分组，其name属性的值分别为"sd"和"hl"，在用户做选择时，每个分组中只允许用户选择一个答案。

在上例中，我们特意使用了<label>元素两种方式来增加用户选择的区域。一种是借助<label>元素的for属性与<input>元素相关联，另外一种是将<input>元素放在<label>和</label>之间。用户在选择时，不仅可以通过点击按钮来实现选中选项，也可以通过点击文字来实现选中，大大方便了用户的操作。

使用checked属性设置默认选中的项

在用户未选择任何选项而提交表单时，表单将不会传输该按钮组的任何值。有时，设计人员可以选中一个默认的值来提高输入的效率。

在HTML中，单选按钮通过checked属性指定某一项为默认值。

<form action="form_example.asp" method="post" id="form2">

 <p>请选择你的性别：</p> 

 <label><input type="radio" name="sex" value="男" checked>男</label>

 <label><input type="radio" name="sex" value="女">女</label><br>

 <input type="submit">

</form>

上面代码在页面加载完毕后，性别“男”的选项是默认选中的状态，因为为该项指定了checked属性。

其在浏览器中的显示效果如下图所示：

HTML单选按钮默认被选中

在设计默认值时，要根据实际情况来指定，主要考虑的因素是：在大多数情况下，用户应该选择的项。这样能减少大多数用户输入的量，但也应避免用户的疏忽而使用了与个人情况不同的默认值。

注意：如果在同一组单选按钮中，有多项设置了checked属性，只有最后一个指定checked属性值的项将被选中。

见下面的例子：

<form action="form_example.asp" method="post" id="form3">

 <p>请选择你的性别：</p> 

 <label><input type="radio" name="sex" value="男" checked>男</label>

 <label><input type="radio" name="sex" value="女" checked>女</label><br>

 <input type="submit">

</form>

其在浏览器中显示的效果如下：

HTML单选按钮设置了多个checked属性

HTML单选按钮的value属性

在上面的例子中都为<input type="radio">指定了value属性。value属性的值不会被浏览器显示出来，但当表单提交时，被选中的单选按钮的value属性值将被传递到服务器端进行处理。服务器端接收的值就是value属性的值。

如果未给<input type="radio">指定value属性，表单默认给该单选按钮组赋值为"on"。

一般，不指定value属性没有太大的实际意义，只能说明用户是否选了某个单选按钮组。

<form action="form_example.asp" method="post" id="form4">

 <p>请选择你的性别：</p> 

 <label><input type="radio" name="sex">男</label>

 <label><input type="radio" name="sex">女</label><br>

 <input type="submit">

</form>

上例中，没有为"sex"按钮组指定value属性，如果用户选择了男，在提交到服务器端时，其接收的值如下图所示：

HTML中没有给单选按钮设置value属性的输出情况

为单选按钮指定required属性

设计者还可以为<input type="radio">指定required属性，当在具有相同name属性的某个单选按钮中指定了required属性时，则该组中必须选定一项。

下例中为name属性值为"sd"中的"上海"选项设置了required属性，则该组中必须选择一项。

<form action="form_example.asp" method="post" id="form5">

 <p>我国的首都是：</p>

 <input type="radio" id="r11" name="sd" value="上海" required><label for="r11">上海</label><br>

 <input type="radio" id="r12" name="sd" value="天津"><label for="r12">天津</label><br>

 <input type="radio" id="r13" name="sd" value="北京"><label for="r13">北京</label><br>

 <input type="radio" id="r14" name="sd" value="重庆"><label for="r14">重庆</label>

 <p>我国境内最长的河流是：</p>

 <label><input type="radio" id="r21" name="hl" value="黄河">黄河</label><br>

 <label><input type="radio" id="r22" name="hl" value="长江">长江</label><br>

 <label><input type="radio" id="r23" name="hl" value="松花江">松花江</label><br>

 <label><input type="radio" id="r24" name="hl" value="珠江">珠江</label>

</form>