HTML <datalist> 标签

定义和用法

<datalist> 标签为 <input> 元素规定预定义选项的列表。

<datalist> 标签用于为 <input> 元素提供“自动完成”功能。用户在输入数据时,将看到预定义选项的下拉列表。

<datalist> 元素的 id 属性必须等于 <input> 元素的 list 属性(这会把它们绑定在一起)。

另请参阅:

HTML DOM 参考手册:Datalist 对象

实例

拥有预定义选项的数据列表(连接到 <input> 元素):

<label for="browser">请从列表中选择您的浏览器:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

亲自试一试

全局属性

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

事件属性

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

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <datalist> 元素:

datalist {
  display: none;
}

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
20.0 10.0 4.0 12.1 9.5