4.3 其他表单元素
4.3.1 select下拉选择控件
在表单中通过＜select＞控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息。开发人员提前设计好选项，让用户在填写信息时可以直接选择，更加方便用户使用。
基本语法如下：
代码运行效果如图4-15所示。
图4-15 下拉列表代码运行效果
1. ＜select＞标签的属性
1）name="列表名"：所有选项只有一个name。
2）multiple="multiple"：设置select控件为多选，可在列表中使用Ctrl键+鼠标进行多选。一般不用。
3）size="1"：规定下拉列表中可见选项的数目。如果size属性的值大于1，但是小于列表中选项的总数目，下拉列表就会显示出滚动条，表示可以查看更多选项。
代码示例如下：
代码中给下拉列表设置了multiple和size属性，在图4-16中可以看到，列表只显示了5项，其余项需要通过拖动滚动条才能查看。
图4-16 添加multiple和size属性的下拉列表
2. ＜option＞标签的属性
1）value=""：分为两种情况。
当选项option没有value属性时，往后台传递的是＜option＞＜/option＞标签中的文字；当选项option有value属性时，往后台传递的是value属性的值。
2）title=""：鼠标指上后显示的文字，与图片的title属性类似。
3）selected="selected"：默认选中，即select的初始值。
3. 利用＜optgroup＞标签分组
＜optgrouplabel="分组名"＞＜/optgroup＞用于将＜option＞标签进行分组，label属性表示分组名。下面的示例就是选项分组的一个应用，在从下拉列表选择地区城市时可以根据省份、城市的不同进行分组，方便用户查找选择。
代码示例如下：
代码运行效果如图4-17所示。
图4-17 采用分组形式的下拉列表效果
4.3.2 textarea文本域
与＜input＞的type="text"不同，＜textarea＞创建的文本域是多行的，文本区中可容纳无限数量的文本，其中文本的默认字体是等宽字体。通常采用CSS（层叠样式表）来设置其宽度和高度。文本域常见用于论坛回复的文本框、博客的留言板等。
基本语法如下：
代码运行效果如图4-18所示。
图4-18 添加CSS的文本域效果
文本域的属性如下：
1）设置宽高：cols规定文本域内可见的列数，rows规定文本域内可见的行数，但这种方式并不常用。通常用CSS来规定其宽度和高度，如：style="width：200px；height：150px；"。
2）readonly="readonly"：设置为只读模式，不允许编辑。
3）disable="disable"：设置禁用文本域。
除以上文本域自带属性外，还时常通过CSS设置其样式。
1）style="resize：none；"：设置宽高不允许拖放修改。
2）style="overflow：hidden；"：设置当文字超出区域时，如何处理。当然也可以通过overflow-x/overflow-y分别设置水平或垂直方向的显示方式。
其中，overflow有三个常用属性值：hidden设置超出区域的文字，隐藏无法显示；scroll设置无论文字多少，均会显示滚动条；auto设置为自动，根据文字多少自动决定是否显示滚动条（默认样式），这种情况下当文本域中的内容没有超出范围时，滚动条呈灰色状。
4.3.3 button按钮
＜button＞的作用是定义一个按钮，与＜input＞创建的按钮功能类似，也可以与JavaScript一起使用来启动脚本。
基本语法如下：
在＜button＞内部可以放置内容，如文本或图像。这是该元素与使用＜input＞创建的按钮之间的不同之处。
注意：始终需要为＜button＞元素规定type属性。不同的浏览器对＜button＞元素的type属性使用不同的默认值。