7.3　单选框和复选框

表单的功能就是收集用户填写的信息。当出现多个选项而且只能选择一个选项时，当可以选择两个或两个以上时，就会分别用到单选框和复选框。通过本节的学习，使读者掌握如何在网页中要求用户填表单时是单选还是复选，单选在选项中只能选择一项，而复选可以选择多项，即本节介绍的单选框和复选框。

7.3.1　单选框

单选框是在表单中有多个选项，且只能选一个的情况下使用。和文本框与密码框一样，都是设置＜input＞里面的type属性，表示单选的是radio，请看下面单选框的语法代码。

＜！—设置单选框—＞

＜input type="radio"＞

在表单中，对于单选框是存在多个选项的，当从多选项中选择一个选项后，为了区别这几个选项是属于哪个单选框，用属性name表示。如果想指定某个选项处于选中状态，用checked在＜input＞为radio的类型里表示选中状态，从第一个＜input＞结束到下一个＜input＞开始前表示第一个＜input＞的选项值，代码7.5演示了单选框的用法。

代码7.5　单选框表示（源代码\第7章\单选框.html）

———————————————文件名：单选框.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞单选框＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—在表单中出现表单，并有多个单选框—＞

07 ＜form＞

08 下面是单选框：＜p＞

09 ＜！—设置3个单选框，且都设置name为book—＞

10 ＜input type="radio"name="book"＞DIV

11 ＜！—设置name为book，表示选项在book中选一个—＞

12 ＜input type="radio"name=book checked＞HTML

13 ＜input type="radio"name=book＞CSS

14 ＜/form＞

15 ＜/body＞

16 ＜/html＞

【代码解析】代码第9～13行为3个单选框的网页代码，效果如图7.4所示。

图　7.4　单选表示

注意　radio在＜input＞中是单独表示的，后面不用结束符，选项的结束是下一个＜input＞或表单其他项框的开始。