您现在的位置是：首页 > 网站建设常见问答网站建设常见问答

HTML5 元素 datalist 介绍

2018-03-30【网站建设常见问答】2034 人已围观

简介最近一个项目用到select下拉菜单,但是option项目众多,使用的结果是下拉菜单很长很长,有的小显示屏幕都超过了显示屏幕.这时怎么...

最近一个项目用到select下拉菜单,但是option项目众多,使用的结果是下拉菜单很长很长,有的小显示屏幕都超过了显示屏幕.这时怎么办呢!这时们可以考虑使用html5的datalist.

元素介绍

想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到<input type="text"/>元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用<select>元素，这个将会限制可选的结果（有时候也许是好的），并且还存在着一个潜在的巨大用户选择。

但如果我们想要用户自由输入的同时又有一些建议选项，这里就是<datalist>的用处了。

示例代码

datalist包含<option>元素，类似于<select>元素，然而<datalist>并不是独立控制，相反它是附加在<input type="text"/>上的list，类似于下面的这段代码：

<body>

<label>Select your preferred code editor:</label>

</datalist>

</body>

这段代码里面使用到了<input type="text"/>控制着一个list的新属性，这是告诉浏览器加载一个id为上面list的值的这个列表值或者来自datalist的建议。

关注宁波网站建设博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ ()

上一篇：宁波:外贸的痛点与对策