<datalist> | HTML5 数据列表标签的定义与用法
定义与用法
- <datalist> 标签定义下拉菜单选项列表。与 input 标签配合使用,来定义 input可能的值。
- <datalist>及其选项不会被显示出来,它仅仅是合法的输入值列表。
- 使用 input 元素的 list 属性来绑定<datalist>,input的list属性值与数据列表ID关联。
- <datalist>标签是HTML5引入的新标签。
语法格式
<datalist>
<option value=””>
……..
</datalist>
示例代码
<label>
填入你喜欢的教程:<br />
<input type="text" id="myclass" list="classlist" style="width:35%">
<datalist id="classlist">
<option value="HTML教程">
<option value="CSS教程">
<option value="JavaScript教程">
<option value="PHP教程">
<option value="Python教程">
<option value="Java教程">
<option value="Mysql教程">
<option value="C语言教程">
<option value="Ruby教程">
<option value="Go语言教程">
<option value="Linux教程">
</datalist>
</label>
效果展示:
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
除了Internet Explorer 9和Safari 12.0以及两者的早期版本以外,几乎所有浏览器都支持数据列表标记。使用datalist标记时,请注意这一点。
全局属性
<datalist> 标签支持 HTML 中的全局属性。
事件属性
<datalist> 标签支持 HTML 中的事件属性。