HTML中的下拉列表 select
2016-01-04 21:20
519 查看
HTML中的下拉列表:
Html代码
其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:
更复杂的下拉列表:
Html代码
这个下拉列表包含一个“项目组”(item group),这个组是无法选择的,使用label标签标记字面内容,真正起作用的,还是value属性。
看一下这个包含“项目组”的下拉列表
option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:
Html代码
option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性
Html代码
option中的参数:title
如果需要在鼠标放到某个项目上时,给出提示,可以使用title属性
Html代码
其实,title也可以用在很多其他的HTML标签中!
Html代码
<select> <option value ="1">Volvo</option> <option value ="2">Saab</option> <option value="3">Opel</option> <option value="4">Audi</option> </select>
其中select是显示一个下拉列表(drop down list)出来,option是下拉列表中的项目(item),而option的文本内容(text content)是下拉列表项目中显示到页面上的值,value是真正需要提交到服务端的值。
显示效果如下所示:
更复杂的下拉列表:
Html代码
<select> <optgroup label="Swedish Cars"> <option value="1">Volvo</option> <option value="2">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="3">Mercedes</option> <option value="4">Audi</option> </optgroup> </select>
这个下拉列表包含一个“项目组”(item group),这个组是无法选择的,使用label标签标记字面内容,真正起作用的,还是value属性。
看一下这个包含“项目组”的下拉列表
option中的参数:selected="selected"
如果需要打开页面就默认选中某个option,需要用到selected参数:
Html代码
<select> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3" selected="selected">Mercedes</option> <option value="4">Audi</option> </select>
option中的参数:disabled="disabled"
如果需要禁用某个项目,但是却又不想隐藏,可以使用disabled属性
Html代码
<select> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3" disabled="disabled">Mercedes</option> <option value="4">Audi</option> </select>
option中的参数:title
如果需要在鼠标放到某个项目上时,给出提示,可以使用title属性
Html代码
<select> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4" title="Audi, your best choice!">Audi</option> </select>
其实,title也可以用在很多其他的HTML标签中!
相关文章推荐
- pasteHTML兼容ie,firefox,chrome等浏览器
- Doxgen+Graphiz+htmlhelp配置
- Cannot redeclare class xxx in /var/www/html/xxx on line xx
- HTML <!DOCTYPE> 标签
- HTML语意化
- 1-5html文件基本结构
- HtmlParser与HtmlLexer类名重复编译失败的解决办法
- HTML 速查列表
- html知识复习
- HTML开发——拖放
- Net处理html页面元素工具类(HtmlAgilityPack.dll)的使用
- Net处理html页面元素工具类(HtmlAgilityPack.dll)的使用
- 制作一个html中闪动的title 来提示消息
- html天气预报小插件
- 根据Html文本设置控件的尺寸
- html 灰度
- HTML上传文件的form enctype属性
- 尝试在让script的type属性等于text/html
- HTML开发——响应式布局
- ajax为什么会返回一段html代码