首页 > HTML
阅读:75,203
HTML 标签(下拉列表)
下拉列表是网页中一种最节省页面空间的选择方式,默认状态下只显示一个选项,只有单击下拉按钮后才能看到全部的选项。例如,淘宝网首页的选择地区一栏,用到的就是下拉列表,我们来看一下:
图1:淘宝网的下拉列表
我们都知道无序列表由 配合使用,有序列表由 配合使用。HTML 下拉列表与它们类似,是由 配合使用的。具体语法格式如下:
其中, 标签用来创建一个下拉列表, 标签表示下拉列表中的每一项(条目)。接下来我们看一个示例:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示:
图2:HTML 下拉列表
我们先来看一下 标签的属性。
1. 标签属性
1) name属性
同所有其它表单元素相同,下拉列表要想被正确提交,也需要设置 name 属性。代码如下:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示:
图3:HTML 下拉列表
通过运行结果可以发现,name 属性并不会显示在页面上。下拉列表的 name 属性同 标签的 name 属性作用相同,主要用来提交数据。
2) size属性
在文章的开始我们提到过,下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项,就要使用 size 属性。我们来看一下具体的使用方法:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
谷歌浏览器的运行结果:
图4:下拉列表 size 属性
再来看一下 IE 浏览器的运行结果:
图5:下拉列表 size 属性
通过比较运行结果我们可以发现,不同浏览器对于一些标签会有不同的样式设置。在后期我们学习 css 教程时会进行讲解如何改变样式。
3) multiple属性
下拉列表默认只允许选择一个选项,如果允许用户选择多个,就要用到 multiple 属性。当 multiple 属性值等于 multiple 时,表示允许用户选择多个选项。我们来看一下具体使用方法:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示(谷歌浏览器):
图4:下拉列表 multiple 属性
注意:此时只需按住ctrl+鼠标左键就可以选择多个选项。multiple="multiple" 可以简写为 multiple。
4) disabled属性
disabled 属性可以禁用下拉列表,使其不能再获得焦点或被修改。被禁用后,它的值不会提交。具体使用方法如下:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示:
图5:下拉列表的 disabled 属性
通过运行结果可以发现,下拉列表的每一项都被“灰化”(gray-out)了,而且不可以被选择。
上述为 标签的属性,接下来我们看一下 标签的属性。
2. 标签属性
1) selected属性
在为 标签设置了 multiple 属性后,就可以通过 标签的selected="selected"实现某一项的预先选中。具体使用方法如下:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示:
图6:下拉列表的 selected 属性
通过运行结果可以发现,设置了selected="selected"属性的项被预先选中,呈深灰色。
2) value属性
标签的 value 属性用来定义当下拉列表在提交时,发送给服务器的值。value 值并不会显示在页面上。使用方法如下:
年龄区间:
18岁以下
18-28岁
28-38岁
38岁以上
运行结果如图所示:
图7:下拉列表
3) disabled属性
标签也有 disabled 属性,不同于 标签的 disabled 属性,它只能禁用列表中的某一项。
3. 总结
实际上,multiple 和 size 这两个属性只要设置了其中一个,下拉列表就可以显示多项。如果只设置 size,而不设置 multiple,得到的是一个不允许多选但是可以显示多项的下拉列表;
标签的 name 属性不显示在页面上,主要用来提交数据;
标签的 value 属性也不显示在页面上,主要用来定义提交给服务器的值;
标签的 disabled 属性禁用的是列表中的某一项;
标签的 disabled 属性禁用的是整个列表。
关注微信公众号「站长严长生」,在手机上阅读所有教程,随时随地都能学习。本公众号由C语言中文网站长运营,每日更新,坚持原创,敢说真话,凡事有态度。
微信扫描二维码关注公众号
优秀文章
VC6.0(VC++6.0)下载地址和安装教程(图解)
Python __slots__:限制类实例动态添加属性和方法
汇编语言Irvine32链接库文件I/O(输入/输出)
Java Connection.prepareCall()方法:调用数据库存储过程
Python super()使用注意事项(包含新式类和旧式类的区别)
IP协议的工作方式
MySQL Event事件(定时任务)是什么?
C++11 constexpr:验证是否为常量表达式(长篇神文)
MySQL备份类型
pthread_create()函数:创建线程
|