HTML <datalist> 标签 详解
HTML基础 2022-06-02 09:39:40小码哥的IT人生shichen
HTML <datalist> 标签
实例
下面是一个 input 元素，datalist 中描述了其可能的值：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>input list 属性</h1>
<p>list 属性引用包含 input 元素的预定义选项的 datalist 元素。</p>
<form action="/demo/demo_form.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
<p><b>注释：</b>Safari 12.0（或更早版本）不支持 datalist 标签。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <datalist> | 20.0 | 10.0 | 4.0 | 12.1 | 9.5 |
HTML 4.01 与 HTML 5 之间的差异
<datalist> 标签是 HTML 5 中的新标签。
全局属性
<datalist> 标签支持 HTML 中的全局属性。
事件属性
<datalist> 标签支持 HTML 中的事件属性。
相关页面
HTML DOM 参考手册：Datalist 对象
相关阅读
- HTML <command> 标签的 type 属性 详解
- HTML <command> 标签的 radiogroup 属性 详解
- HTML <command> 标签的 label 属性 详解
- HTML <command> 标签的 icon 属性 详解
- HTML <command> 标签的 disabled 属性 详解
- HTML <command> 标签的 checked 属性 详解
- HTML <colgroup> 标签的 width 属性 详解
- HTML <colgroup> 标签的 valign 属性 详解
- HTML <colgroup> 标签的 charoff 属性 详解
- HTML <colgroup> 标签的 char 属性 详解
