HTML <datalist> 标签

HTML <datalist> 标签定义了输入字段（<input>）的选项列表。选项显示为下拉列表，用户可以从中选择一个选项。

语法

<label for="input_id">输入字段标签</label>
<input list="datalist_id" id="input_id" name="input_name">
<datalist id="datalist_id">
  <option value="选项1">
  <option value="选项2">
  <option value="选项3">
</datalist>

属性

• list：指定对应的<datalist>元素的 ID；
• option：其中的<option>标签定义了选项列表中的每个选项。

示例

<label for="cars">请选择一款汽车：</label>

<input list="car-models" id="cars" name="car">

<datalist id="car-models">
  <option value="奥迪 A4">
  <option value="宝马 3系">
  <option value="奔驰 C级">
  <option value="斯巴鲁 XV">
</datalist>

上述示例会显示一个输入字段和下拉列表，用户可以从列表中选择一款汽车。

兼容性

<datalist> 标签在 IE10 及以上版本的 IE 浏览器、Firefox、Chrome 和 Safari 中得到了支持。

注意事项

• <datalist> 标签必须与 <input> 标签一起使用；
• 选项可以通过 <option> 标签添加；
• <datalist> 标签没有样式，开发者应该自定义样式来调整样式效果。