在页面中有些地方需要列出几个项目，让浏览者通过选择钮选择项目（如性别中的“男”或“女”）。选择钮可以是单选钮（radio）也可以是复选框（checkbox）。

单选钮和复选框的设置可以在＜input＞标记中进行，主要属性如下：

（1）type属性设置选择钮的类型。

（2）value属性设置选择钮的控件初值，用以告诉表单制作者选择结果。

（3）checked="checked"表示是否为默认选项。

（4）name是该控件的唯一标识，同一组复选框或单选钮的名称是一样的。

【例6-8】复选框和单选钮的应用。

在编辑窗口中输入下面的代码（为了在网页中使页面内容整齐美观，本例在表单中使用表格来实现对齐功能）：

＜！--文件名：ex6-8.html--＞

＜！DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"＞

＜head＞＜meta http-equiv="Content-Type"content="text/html；charset=gb2312"/＞

＜title＞学生社团申报表＜/title＞＜/head＞

＜body＞

＜form id="f1"＞＜！--定义表单--＞

＜h4 align="center"＞为便于我们合理安排您感兴趣的活动，也便于我们能及时联系到您，请如实填写下面的内容。谢谢您的参与！＜/h4＞＜hr/＞

＜table border="0"cellspacing="10"width="650"align="center"＞＜！--定义表格--＞

＜tr＞＜td align="right"＞姓名：＜/td＞＜！--表格的第1行--＞

＜td align="left"＞＜input type="text"name="name"size="8"/＞＜/td＞＜/tr＞

＜tr＞＜td align="right"＞性别：＜/td＞＜！--表格的第2行--＞

＜td align="left"＞＜input type="radio"name="sex"value="男"checked="checked"/＞男

＜input type="radio"name="sex"value="女"/＞女＜/td＞＜/tr＞

＜tr＞＜td align="right"＞出生日期：＜/td＞＜！--表格的第3行--＞

＜td align="left"＞＜input type="text"name="year"size="4"/＞年(www.daowen.com)

＜input type="text"name="month"size="2"/＞月

＜input type="text"name="day"size="2"/＞日＜/td＞＜/tr＞

＜tr＞＜td align="right"＞联系电话：＜/td＞＜！--表格的第4行--＞

＜td align="left"＞＜input type="text"name="phone"size="12"/＞＜/td＞＜/tr＞

＜tr＞＜td align="right"＞个人爱好：＜/td＞＜！--表格的第5行--＞

＜td align="left"＞＜input type="checkbox"name="like"value="棋牌"/＞棋牌

＜input type="checkbox"name="like"value="美术"/＞美术

＜input type="checkbox"name="like"value="音乐"/＞音乐

＜input type="checkbox"name="like"value="球类"/＞球类

＜input type="checkbox"name="like"value="旅游"/＞旅游

＜input type="checkbox"name="like"value="收藏"/＞收藏

＜input type="checkbox"name="like"value="购物"/＞购物

＜input type="checkbox"name="like"value="舞蹈"/＞舞蹈

＜input type="checkbox"name="like"value="其他"/＞其他＜/td＞＜/tr＞

＜/table＞

＜p align="center"＞＜input type="submit"value="填写完毕提交"/＞＜input type="reset"value="我想重填"/＞＜/p＞

＜/form＞＜hr/＞

＜/body＞

＜/html＞

在浏览器中显示的效果如图6-8所示。

图6-8　单选钮和复选框