HTML Datalist 元素介绍

HTML Datalist 元素用于定义一个预定义的选项列表，与 input 元素的 type 属性为 text 或 search 结合使用。

语法

<label for="input-id">输入框标签</label>
<input type="text" list="datalist-id" id="input-id" name="input-name">
<datalist id="datalist-id">
  <option value="选项1"></option>
  <option value="选项2"></option>
  <option value="选项3"></option>
  <option value="选项4"></option>
</datalist>

属性

list

指定元素的 id，指定一个关联的 datalist 元素。

value

定义选项列表中的选项之一的值。

示例

<label for="city-name">请输入城市名：</label>
<input type="text" id="city-name" list="cities" name="city">
<datalist id="cities">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="广州"></option>
  <option value="深圳"></option>
</datalist>

特点

1. 用户在输入框中输入时，会自动显示与输入值匹配的选项列表。
2. 用户可以直接从选项列表中选择一个选项，也可以继续输入，并从输入值的匹配列表中选择一个选项。
3. 通过设置 value 属性为某个选项的值，可以在选项列表中显示该选项。
4. Datalist选项不支持CSS样式，但可以与自定义样式表一起使用。

以上信息介绍均采用Markdown格式，如有不清晰处可参考HTML官方文档。