HTML

HTML <datalist> 标签用于定义输入框的预选项列表。

语法

<input list="datalist-id">
<datalist id="datalist-id">
  <option value="option1">
  <option value="option2">
  <option value="option3">
</datalist>

属性

• id：用于关联 <input> 元素和 <datalist> 元素。
• name：针对表单控件，用于指定控件的名称。
• readonly：制定该输入框为只读。
• required：指定输入框为必填项。

兼容性

| 标签 | Chrome | Firefox | IE | Opera | Safari | | --- | --- | --- | --- | --- | --- | | <datalist> | 20.0+ | 4.0+ | 10.0+ | 15.0+ | 6.0+ |

示例

<form>
  <label for="browser">请选择浏览器：</label>
  <input id="browser" list="browsers" name="browser" required>
  <datalist id="browsers">
    <option value="Google Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Microsoft Edge">
  </datalist>
  <button type="submit">提交</button>
</form>

该示例展示了一个表单，包含一个文本输入框和一个下拉列表框。用户可以直接在输入框中输入或从下拉列表框中选择字符串。如果 <input> 标签中指定了 required 属性，则必须选择或输入某个字符串才能提交表单。