HTML5教程之datalist标签自动补全
2013-09-26 12:40
344 查看
HTML5教程之datalist标签自动补全
datalist标签:datalist介绍:datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一个新的属性list(注意,不是for),list与for的用法一样,list的值设置为表单元素的 id,这样他们便会自动关联了。
Chrome对此标签支持不好,Firefox和Opera可很好的支持。
datalist作用:
我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词,比如Google或百度的搜索,如下图:
此效果非HTML5的datalist技术实现
datalist案例:
<input list="w3cfuns-search" /> <datalist id="w3cfuns-search"> <option value="W3Cfuns"> <option value="W3C标准"> <option value="W3C规则"> <option value="W3C验证"> <option value="前端开发"> <option value="前端开发网"> <option value="2天驾驭DIV+CSS"> <option value="W3CSchool"> </datalist>
datalist说明:
个人认为称呼datalist为自动补全列表更加合适,因为它并不是下拉列表。
本文原地址:http://www.sitejs.cn/sitejs-12745-1.html
相关文章推荐
- html5 datalist标签使用示例(自动完成组件)
- html5实现输入框自动提示功能之------datalist标签
- 讲给Android程序员看的前端教程(04)——HTML5标签(3)
- php使HTML标签自动补全闭合函数代码
- HTML5表单教程之input新增加的5种其他类型1种标签
- HTML5教程-meter标签的应用
- 浏览器 自动 补全 html标签 功能 兼容
- 讲给Android程序员看的前端教程(05)——HTML5标签(4)
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- HTML5----input-datalist输入框自动提示功能
- krpano 教程 - autorotate自动旋转标签中文说明
- HTML5教程之progress标签的应用
- Android自动补全教程
- php截取html字符串及自动补全html标签的方法
- VS 编辑HTML 标签,自动补全属性引号设置
- 讲给Android程序员看的前端教程(06)——HTML5标签(5)
- Html5在ios上input标签自动填充内容移动光标至尾的方法
- HTML5教程之details展开收缩标签的应用
- HTML5 datalist 标签