7.4　下拉列表与文本域

本节将学习下拉列表与文本域，下拉列表是可以选择的列表也称为下拉列表；文本域是可以输入多行文本的区域。在表单中常用到，当要选择出生年月时，就会用到下拉列表，同理，选择省份时也会用到。文本域在填写多行文本时会用到。下拉列表与文本域在网页应用非常广，下面就学习它们。

下拉列表是可以选择的列表，当在列表中选择要选的选项时使用，只能选其中一个选项（通过设置也可以选几项）。语法形式如下。

＜！—设置下拉列表—＞

＜select＞

＜！-设置下拉列表选项—＞

＜option＞选项一＜/option＞

＜option＞选项二＜/option＞

＜option selected＞选项三＜/option＞

＜/select＞

下拉列表用＜select＞标记对表示，＜option＞标记对里面的文字是下拉列表的选项，其中它的属性selected表示已选中状态。代码7.7演示了下拉列表的用法。

代码7.7　下拉列表（源代码\第7章\下拉列表.html）

——————————————-文件名：下拉列表.html———————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞下拉列表＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置表单，并包含下拉列表—＞

07 ＜form＞

08 ＜！—设置下拉列表—＞

09 ＜select＞

10 ＜！—设置选项—＞

11 ＜option＞HTML＜/option＞

12 ＜option＞CSS＜/option＞

13 ＜！—设置选项并用selected表示被选中—＞

14 ＜option selected＞DIV＜/option＞

15 ＜/select＞

16 ＜/form＞

17 ＜/body＞

18 ＜/html＞

【代码解析】在代码第9～15行的下拉列表中，用select标记对表示下拉列表，且设置选中的选项时，在＜option＞内加上selected表示选中，效果如图7.6所示。

图　7.6　下拉列表

技巧＜select＞里的属性可以由name代表这个下拉列表的名称，size表示下拉列表可视选项的数目，multiple表示可以多选。