HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML5每日一练之datalist标签自动补全的使用

HTML5每日一练之datalist标签自动补全的使用

HTML5教程  手机阅读
注:在其它的一些教程或资料中datalist标签称为下拉列表,我认为这种叫法不够准确,而且不能一下子理解此标签。比如前段时间:“一个朋友问我datalist是不是一种能自定义样式的select?”,后来才知道,有些书籍或教程中称为下拉列表而导致初学者理解错。那么此标签怎么称呼它才合适呢?咱们看完下面的案例后,我再说明:

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

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

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

此效果非HTML5的datalist技术实现


datalist案例:



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

【HTML5每日一练之datalist标签自动补全的使用】相关文章

1. HTML5每日一练之datalist标签自动补全的使用

2. HTML5每日一练之details展开收缩标签的应用

3. HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用

4. HTML5每日一练之视频标签的应用

5. HTML5每日一练之figure新标签的应用

6. HTML5每日一练之mark标签的应用

7. HTML5每日一练之progress标签的应用

8. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形

9. HTML5每日一练之meter标签的应用

10. HTML5每日一练之Canvas标签的应用-绘制坐标变换图形

本文来源:https://www.51html5.com/a599.html

点击展开全部
上一篇:HTML5每日一练之OL列表的改良 下一篇:HTML5每日一练之视频标签的应用

﹝HTML5每日一练之datalist标签自动补全的使用﹞相关内容

「HTML5每日一练之datalist标签自动补全的使用」相关专题

input list html5
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢