<datalist>:HTML 数据列表元素

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

¥To bind the <datalist> element to the control, we give it a unique identifier in the id attribute, and then add the list attribute to the <input> element with the same identifier as value. Only certain types of <input> support this behavior, and it can also vary from browser to browser.

每个 <option> 元素都应该有一个 value 属性，它代表要输入的建议。它还可以具有 label 属性，或者缺少一些文本内容，这些文本内容可能会由浏览器显示，而不是 value（Firefox），或者除了 value（Chrome 和 Safari，作为补充文本）。下拉菜单的确切内容取决于浏览器，但单击时，输入到控制字段的内容将始终来自 value 属性。

¥Each <option> element should have a value attribute, which represents a suggestion to be entered into the input. It can also have a label attribute, or, missing that, some text content, which may be displayed by the browser instead of value (Firefox), or in addition to value (Chrome and Safari, as supplemental text). The exact content of the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.

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

¥Note: <datalist> is not a replacement for <select>. A <datalist> does not represent an input itself; it is a list of suggested values for an associated control. The control can still accept any value that passes vaildation, even if it is not in this suggestion list.

¥Attributes

该元素除了所有元素共有的 全局属性 之外没有其他属性。

¥This element has no other attributes than the global attributes, common to all elements.

¥Accessibility

当决定使用 <datalist> 元素时，需要注意以下一些可访问性问题：

¥When deciding to use the <datalist> element, here are some accessibility issues to be mindful of:

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

¥Examples

¥Textual types

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

¥Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control. Typically the right side of a control will also have an arrow pointing to the presence of predefined values.

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

¥Date and Time types

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

¥The types month, week, date, time and datetime-local can show an interface that allows a convenient selection of a date and time. Predefined values can be shown there, allowing the user to quickly fill the control value.

注意：当不支持类型时，将使用创建简单文本字段的 text 类型。该字段将正确识别推荐值并在下拉菜单中向用户显示它们。

¥Note: When type is not supported, text type creating simple text field will be used instead. That field will correctly recognize recommended values and display them to the user in a drop-down menu.

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

range 类型中的推荐值将显示为用户可以轻松选择的一系列哈希标记。

¥The recommended values in the range type will be shown as series of hash marks that the user can easily select.

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

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

¥The color type can show predefined colors in a browser-provided interface.

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

¥Password type

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

¥The specification allows linking <datalist> with a password type, but no browser supports it for security reasons.

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

¥Technical summary

    <a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
      >措辞内容</a
    > 或零个或多个 <option> 元素。
  </td>
</tr> 
<tr>
  <th scope="row">标签遗漏</th>
  <td>无，开始和结束标记都是强制性的。</td>
</tr>
<tr>
  <th scope="row">允许的父级</th>
  <td>
    任何接受 
    <a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
      >措辞内容</a
    > 的元素。
  </td>
</tr> 
<tr>
  <th scope="row">隐式 ARIA 角色</th>
  <td>
    <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role"
      >listbox</a
    >
  </td>
</tr>
<tr>
  <th scope="row">允许的 ARIA 角色</th>
  <td>不允许  <code>role</code></td>
</tr> 
<tr>
  <th scope="row">DOM 接口</th>
  <td>HTMLDataListElement</td>
</tr>

¥See also

• <input> 元素，更具体地说是它的 list 属性；
• <option> 元素。