HTML5，datalist的作用

来源：互联网 2023-03-16 19:10:17 版权归原作者所有，如有侵权，请联系我们

在HTML5里，新增加了很多控件，其中datalist就是其中新增的控件之一。这个控件有什么作用？在什么情况下会使用它？下面我们一起去了解下。

方法/步骤

首先从图中代码可以看出，datalist和select控件一样，都是内嵌option选项，二者有没有一点关系呢？

HTML5，datalist的作用？

按这个代码运行页面，界面上并没有显示任何datalist的控件。

HTML5，datalist的作用？

其实这个datalist要和input输入框来配合使用，我们在代码里添加一个输入框。如图，输入框的list要和datalist的id相对应。

HTML5，datalist的作用？

在FireFox下，页面显示的输入框和平时普通的输入框没什么区别。但在Chrome下，在鼠标经过或获取到焦点时，会有箭头。

HTML5，datalist的作用？

双击这个输入框，就会弹出datalist的选项了，弹出来后，就可以像select控件一样，点击选择这些选项，选中后对应的值就会显示在input输入框里。

HTML5，datalist的作用？

和select控件不一样的是，这个输入框除了可以选择选项外，我们还可以直接输入内容。不受选项的影响。

所以当你的输入框需要提供一些选项给用户选择，但又不限制用户的输入内容时，不可以用这个datalist input的组合来实现了。

HTML5，datalist的作用？

当我们在输入框里输入内容时，如果和datalist的选项有这些文字的，就会自动弹出下拉来供选择。

HTML5，datalist的作用？

7相关内容未经授权抓取自百度经验

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：html5+css3书写鲨鱼动画效果下一篇：利用CSS，‘画’一个饼形四分图