<datalist>：HTML 数据列表元素

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

尝试一下

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

label {
  display: block;
  margin-bottom: 10px;
}

属性

该元素除了公用的全局属性之外，没有其他属性。

示例

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

结果

规范

Specification
HTML
# the-datalist-element

浏览器兼容性

参见