<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>  

效果展示:


浏览器支持

除了Internet Explorer 9和Safari 12.0以及两者的早期版本以外,几乎所有浏览器都支持数据列表标记。使用datalist标记时,请注意这一点。


全局属性

<datalist> 标签支持 HTML 中的全局属性。


事件属性

<datalist> 标签支持 HTML 中的事件属性。


相关