HTML5中的<datalist>标签用于输入建议

翻滚的胖子
2023-09-01 11:57:08
前端技术
CSS JavaScript

HTML5中的<datalist>标签用于输入建议

在HTML5中，<datalist>标签被引入用于提供输入建议的功能。该标签通常与<input>标签配合使用，可以为用户提供预定义的选项列表，以便用户在输入时得到相应的建议。

使用<datalist>标签

要使用<datalist>标签，首先需要在HTML中定义一个<input>标签，并为其设置list属性，该属性的值应与<datalist>标签的id属性相同。

<input list="suggestions">

<datalist id="suggestions">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

上述代码中，定义了一个<input>标签，其list属性的值为"suggestions"。同时，在页面的其他位置，定义了一个<datalist>标签，其id属性的值也为"suggestions"。在<datalist>标签中，我们可以为每个选项定义一个<option>标签，其value属性的值为选项的值。