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

注： 在其它的一些教程或资料中datalist标签称为下拉列表，我认为这种叫法不够准确，而且不能一下子理解此标签。比如前段时间：“一个 朋友 问我datalist是不是一种能自定义样式的select？”，后来才 知道 ，有些 书籍 或教程中称为下拉列表而导致初学者理解错。那么此标签怎么称呼它才合适呢？咱们看完下面的案例后，我再说明：
datalist标签：
datalist介绍：
datalist一般不会独行江湖，它需要与 input标签 的搭配使用，就像label标签与input标签搭配使用一样。既然与input标签搭配使用，那么这两个标签之间必定存在着“特殊的关系”，不然input与datalist就互不相认了，那么如何才能让他们建立起来这种关系呢？这个时候我们需要一个新的属性list （注意，不是for） ，list与for的用法一样，list的值设置为表单元素的 id，这样他们便会自动关联了。
Ch rom e对此标签支持不好，Firefox和 opera 可很好的支持
datalist作用：
我们经常在网上的搜索框中看到当输入一个字符，输入框下方会自动列出你输入的关键词，比如 GOOGLE 或 百度 的搜索，如下图：

此效果非HT ML 5的datalist技 术 实现

datalist案例：

<input list="w3 CF uns -s e Arch " />
<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为自动补全列表更加合适，因为它并不是下拉列表。

以上就是HTML5每日一练之datalist标签自动补全的使用的内容，更多相关内容请关注PHP中文网（HdhCmsTestphp.cn）！

相关 文章 ：

html5 datalist标签使用示例(自动完成组件)

datalist标签

总结

以上是 为你收集整理的 HTML5每日一练之datalist标签自动补全的使用 全部内容，希望文章能够帮你解决 HTML5每日一练之datalist标签自动补全的使用 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于HTML5每日一练之datalist标签自动补全的使用的详细内容...