您现在的位置是:首页 > 网站建设常见问答网站建设常见问答
HTML5 元素 datalist 介绍
2018-03-30【网站建设常见问答】2161 人已围观
简介 最近一个项目用到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>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" />
<option value="Coda" />
<option value="Dreamweaver" />
</datalist>
</body>
这段代码里面使用到了<input type="text"/>控制着一个list的新属性,这是告诉浏览器加载一个id为上面list的值的这个列表值或者来自datalist的建议。
关注宁波网站建设博客,更多精彩分享,敬请期待!
Tags:
很赞哦! ()
上一篇:宁波:外贸的痛点与对策
相关文章
随机图文
百度搜索的彩蛋!
今天无意搜索“翻转”,结果百度出来了让我惊讶的效果哈,各位不妨也试试!是的我的浏览器跟着也旋转了! 赶紧再查,原来百度从很早推出 ...
12306启用图片验证登录方式使目前抢票软件失效
闲来无事看到12306网站开启了新的验证方式,俗话说道高一迟魔高一丈。这回反过来,12306终于聪明了一回! 北京时间3月16日消息 铁...
div覆盖div DIV相互重叠如何解决
div覆盖div,出现div与div盒子之间产生重叠覆盖现象,而内容没有出现覆盖重叠现象原因与解决方法。 可能您遇到过上下结构的布局,...
-迎奥运、诚信经营
宁波网站制作 宁波网站建设 www.0574nb.cn




微信收款码
支付宝收款码