HTML5教程：详解datalist标签和实战代码

最新推荐文章于 2022-02-23 11:13:01 发布

高级网络营销师

最新推荐文章于 2022-02-23 11:13:01 发布

阅读量1k

点赞数 1

分类专栏：网页设计文章标签： html5

本文链接：https://blog.csdn.net/gjwlyxs/article/details/105718189

版权

网页设计专栏收录该内容

26 篇文章 0 订阅

订阅专栏

datalist标签：
datalist标签需要与input标签相互搭配使用才能发挥作用，例如label标签与input标签搭配使用一样。如果说datalist标签需要与input标签搭配使用，那么这两个标签之间必然存在着某种较为特殊的关系。相信看过下面的案例之后，大家自会明白：

datalist标签的作用：

当我们在上网的时候会在搜索框输入一个字符，在搜索框下方就会出现你输入的关键词。
但是所得到的结果并非是HTML5的datalist技术实现的

datalist案例：

<input list="Webjx.com-search" />
<datalist id="Webjx.com-search">
<option value="Webjx.com">
<option value="W3C标准">
<option value="W3C规则">
<option value="W3C验证">
<option value="前端开发">
<option value="前端开发网">
<option value="2天驾驭DIV+CSS">
<option value="Webjx.Com">
</datalist>

datalist标签作用应该是“自动补全列表”更为贴切，因为它并非是下拉列表。所以，大家不要再误认为datalist标签是下拉列表了