HTML <datalist> 元素

HTML <datalist> 元素包含一组 <option> 元素，表示其他表单控件的可选值。

使用 <datalist> 为 <input> 设置一组可选可选值：

<label>从列表中选择一个浏览器：
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

尝试一下 »

特性

内容类别	流式内容，短语内容。
允许的内容	短语内容或零到多个 <option> 元素。
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受短语内容的元素。
允许的 ARIA 角色	无
DOM 接口	HTMLDataListElement

属性

该元素只包含全局属性。

事件属性

<datalist> 元素支持 HTML 的事件属性。

注意

<datalist> 元素被用来在为 <input> 元素提供 “自动完成” 的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

使用提交表单的数据

<input> 的 name 属性指定了表单数据提交时的控件名称。

然后可以在 http 请求中的服务器中使用这个表单数据，类似于：String myBrowser = request.getParameter("myBrowser");

HTML 4.01 与 HTML5 之间的差异

<datalist> 元素是 HTML5 中的新元素。

规范

规范	状态	备注
HTML Living Standard <datalist> 的定义	现行的标准	-
HTML5 <datalist> 的定义	推荐	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• <input> 元素，更具体地说是其 list 属性;
• <option> 元素。