<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 属性。

¥Note: The <option> element can store a value as internal content and in the value and label attributes. Which one will be visible in the drop-down menu depends on the browser, but when clicked, content entered into control field will always come from the value attribute.

¥Attributes

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

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

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

¥Accessibility concerns

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

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

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

¥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> 元素。