在页面中有些地方需要列出几个项目,让浏览者通过选择钮选择项目(如性别中的“男”或“女”)。选择钮可以是单选钮(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 单选钮和复选框
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。