当需要浏览者选择的项目较多时，如果用选择钮来选择，选择内容占据页面的区域较大。另外，当用文本框来收集一些信息时（如学生所在系），如果浏览者输入的内容不统一，将对数据处理带来不利影响。这时，我们可以使用＜select＞标记和＜option＞标记来设置列表框。格式为：

＜select size="x"name="选择栏名"multiple="multiple"＞

＜option value="选项值"＞选项说明＜/option＞

＜option selected="selected"value="选项值"＞选项说明＜/option＞

……

＜/select＞

说明：

（1）在＜select＞标记中：

●size取数字，表示在带滚动条的列表框中一次可见的列表项数。

●name是列表框的唯一标识。

●multiple表示可选多个选项，若无此项则只能选择一个选项。

（2）在＜option＞标记中：

●selected="selected”表示该项为默认选项。

●value指定选项值，默认初值为option中的选项说明。

（3）列表框有两种形式：弹出式和字段式。二者的主要区别是，当＜select＞中的size属性值大于1时，表示在列表框中不拖动滚动条可以显示选项的数目。

【例6-9】设置列表框。

在编辑窗口中输入下面的代码：

＜！--文件名：ex6-9.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 text="blue"bgcolor="ivory"＞

＜form id="f"＞

＜h3 align="center"＞学生学籍档案建立资料收集＜/h3＞＜hr/＞

姓名：＜input type="text"name="name1"size="8"＞＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；

性别：＜input type="radio"name="sex"value="男"checked="checked"/＞男

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

所在系：＜select name="szx"size="3"＞＜！--显示3项--＞

＜option＞管理系＜/option＞(www.daowen.com)

＜option selected="selected"value="信息系"＞信息系＜/option＞

＜option＞财经系＜/option＞

＜option＞机电工程系＜/option＞

＜option＞土木工程系＜/option＞

＜/select＞＆nbsp；＆nbsp；＆nbsp；

班级：＜select name="bj"size="5"＞＜！--显示5项--＞

＜option＞文秘0501＜/option＞

＜optionselected="selected"value="计算机0601"＞计算机0601＜/option＞

＜option＞会计0601＜/option＞

＜option＞汽车修理0601＜/option＞

＜option＞工民建0601＜/option＞

＜option＞网络0601＜/option＞

＜option＞软件工程0601＜/option＞

＜/select＞＜br/＞

地址：＜input type="text"name="lxdz"size="40"/＞＜br/＞

密码：＜input type="password"name="srmm"size="10"maxlength="8"/＞＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；＆nbsp；

面貌：＜select name="xl"size="1"＞

＜option＞党员＜/option＞

＜option＞预备党员＜/option＞

＜option selected="selected"＞团员＜/option＞

＜option＞群众＜/option＞

＜/select＞＆nbsp；＆nbsp；＆nbsp；＆nbsp；

＜input type="submit"/＞＜input type="reset"/＞

＜/form＞

＜/body＞

＜/html＞

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

图6-9　列表框