首页 > web前端 > html/css/css3 > HTML5 的新增的表单元素datalist标签
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-15

HTML5 的新增的表单元素datalist标签

datalist 元素规定输入域的选项列表,列表是通过 datalist 内的 option 元素创建的,如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:

option元素包含label,value属性,对应option名称和值。

实例

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="码农小兵" value="http://www.devdo.net" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

亲自试一试吧,代码如下:

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="码农小兵" value="http://www.devdo.net" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>

提示:option 元素永远都要设置 value 属性。

各个浏览器显示效果略有不同。

QQ截图20150715101338

QQ截图20150715101454

QQ截图20150715101610

测试,IE8,safari浏览器不支持。

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*