html5新增的表单元素|HTML5元素datalist自动补全的例子

时间:2020-09-17  来源:html5教程  阅读:

atalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

datalist介绍:datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一个新的属性list(注意,不是for),list与for的用法一样,list的值设置为表单元素的 id,这样他们便会自动关联了。

元素介绍的用处了。代码包含

浏览器效果





ios和Android,你可以在这里查看最新支持:canIUse
Draft Specification on W3C

datalist标签自动补全

Chrome对此标签支持不好,Firefox和Opera可很好的支持。

datalist作用:

我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词,比如Google或百度的搜索,如下图:


此效果非HTML5的datalist技术实现

datalist案例:



       

datalist说明:

个人认为称呼datalist为自动补全列表更加合适,因为它并不是下拉列表。


浏览器兼容性

下面的数据来自caniuse。

可以看出,遥遥领先的依然是风采依旧的Chrome,对该元素的支持全线飘绿;
同时Firefox也是毫不示弱,紧随版本帝之后;
而其他浏览器情况则各不相同,正所谓性福的人都相似,不幸的人各有不幸。
Opera在边缘浏览器中表现强劲,绿得很耀眼;
值得注意的是,在这场不算较量的较量中,苹果太子Safari则是黑马般拿到了垫底的位置,全线飘红。这直接一举打破IE在主流浏览器的各种评测中常年垫底的记录。
而IE虽然摆脱了末位的阴影,但即使是最新的IE11也只是对Datalist元素进行了部分支持,所以要与各强劲对手比肩而受到前端开发者的青睐还有些工作要做。但留给IE翻盘的时间已经不多了,正如留给中国队的时间一样~

html5新增的表单元素|HTML5元素datalist自动补全的例子

http://m.bbyears.com/wangyezhizuo/99235.html

推荐访问:html5组合标题元素 html5移除了那些元素
相关阅读 猜你喜欢
本类排行 本类最新