理论教育 网页设计与制作-单选钮和复选框简介

网页设计与制作-单选钮和复选框简介

时间:2023-11-04 理论教育 版权反馈
【摘要】:在页面中有些地方需要列出几个项目,让浏览者通过选择钮选择项目。选择钮可以是单选钮也可以是复选框。单选钮和复选框的设置可以在<input>标记中进行,主要属性如下:type属性设置选择钮的类型。value属性设置选择钮的控件初值,用以告诉表单制作者选择结果。checked="checked"表示是否为默认选项。name是该控件的唯一标识,同一组复选框或单选钮的名称是一样的。--文件名:ex6-8.html--><!图6-8单选钮和复选框

网页设计与制作-单选钮和复选框简介

在页面中有些地方需要列出几个项目,让浏览者通过选择钮选择项目(如性别中的“男”或“女”)。选择钮可以是单选钮(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 单选钮和复选框

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈