<datalist>: HTML 数据列表元素

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

<datalist> HTML 元素包含一组 <option> 元素，这些元素表示其他控件中可供选择的允许或建议的选项。

试试

要将 <datalist> 元素绑定到控件，我们在 id 属性中为它提供一个唯一的标识符，然后将 list 属性添加到 <input> 元素，并使用相同的标识符作为值。只有某些类型的 <input> 支持此行为，并且它也可能因浏览器而异。

每个 <option> 元素都应该有一个 value 属性，该属性表示建议输入到输入框中的值。它也可以有一个 label 属性，或者，如果没有，则可以使用一些文本内容，该内容可能由浏览器显示而不是 value（Firefox），或者除了 value（Chrome 和 Safari，作为补充文本）。下拉菜单的确切内容取决于浏览器，但在点击时，输入到控件字段中的内容始终来自 value 属性。

注意： <datalist> 不是 <select> 的替代品。<datalist> 本身不代表一个输入；它是一个与关联控件相关的建议值的列表。该控件仍然可以接受任何通过验证的值，即使该值不在此建议列表中。

属性

此元素除了对所有元素通用的全局属性外没有其他属性。

可访问性

在决定使用 <datalist> 元素时，以下是一些需要牢记的可访问性问题

数据列表选项的字体大小不会缩放，始终保持相同的大小。当其他内容放大或缩小时，自动建议的内容不会增长或缩小。
由于使用 CSS 针对选项列表非常有限，甚至不存在，因此无法针对高对比度模式进行样式化渲染。
一些屏幕阅读器/浏览器组合，包括 NVDA 和 Firefox，不会宣布自动建议弹出窗口的内容。

示例

文本类型

在类型 text、search、url、tel、email 和 number 中的建议值将在用户点击或双击控件时显示在下拉菜单中。通常，控件的右侧也会有一个指向预定义值存在的箭头。

html

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

日期和时间类型

类型 month、week、date、time 和 datetime-local 可以显示一个界面，允许用户方便地选择日期和时间。预定义值可以在那里显示，允许用户快速填写控件值。

注意：当类型不受支持时，将使用创建简单文本字段的 text 类型代替。该字段将正确识别建议值并将它们显示给用户，位于下拉菜单中。

html

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

范围类型

在 range 类型中的建议值将显示为一系列散列标记，用户可以轻松选择。

html

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

颜色类型

color 类型可以在浏览器提供的界面中显示预定义的颜色。

html

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

密码类型

规范允许将 <datalist> 与 password 类型链接，但出于安全原因，任何浏览器都不支持它。

html

<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

技术总结

内容类别	流内容、短语内容。
允许的内容	要么是短语内容，要么是零个或多个 `<option>` 元素。
标签省略	没有，开始标签和结束标签都是必须的。
允许的父级	任何接受短语内容的元素。
隐式 ARIA 角色	listbox
允许的 ARIA 角色	不允许使用 `role`
DOM 接口	`HTMLDataListElement`

规范

规范
HTML 标准 # the-datalist-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

<input> 元素，更准确地说是它的 list 属性；
<option> 元素。