HTML list 属性与 <input> 元素一起使用，以指定用户可以从中进行选择的预定义选项列表。
datalist 元素提供预定义值的列表，以向用户建议此输入。
它是如何工作的
- 当用户开始在输入字段中输入时，将出现一个下拉列表，其中包含 <datalist> 中定义的选项。
- 用户可以从此列表中选择一个选项，该选项将使用所选值填充输入字段。
- 这对于提供用户可以选择的建议或预定义值列表特别有用，从而增强了用户体验。
语法
<tag list = "value" />
其中 value 应该是 datalist 元素的 id 值。
适用于
下面列出的元素允许使用 HTML list 属性。
| 元素 | 描述 |
|---|---|
| <input> | HTML<input>标签用于接受来自用户的各种类型的输入。 |
HTML 列表属性的示例
以下示例将说明 HTML 列表属性，我们应该在何处以及如何使用此属性！
在 datalist 中使用预定义值的文本输入
在以下示例中，我们使用 'list' 属性，输入 type=text，并提及列表属性的值作为 datalist 的 id 名称。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
Click on input field and select
from dropdown:
</p>
<input type="text" list="fruits">
<datalist id='fruits'>
<option value="Apple"></option>
<option value="Banana"></option>
<option value="Orange"></option>
<option value="Grapes"></option>
<option value="Pears"></option>
</datalist>
</body>
</html>
数字输入的列表属性
考虑到另一种情况，我们将使用带有输入 type=number 的 list 属性。用户可以选择从下拉列表中选择数字或在字段中输入数字。
<!DOCTYPE html>
<html lang="en">
<body>
<!--Example of the HTML list attribute -->
<p>
Click on input field and
select from dropdown:
</p>
<input type="number"
list="numbers"
placeholder="Select number..">
<datalist id='numbers'>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
</datalist>
</body>
</html>
时间输入的 List 属性
让我们看一下以下示例，我们将在其中使用带有输入 type=time 的 list 属性。用户可以从下拉列表中选择时间或输入他需要的时间。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
Click on input field and
select from dropdown:
</p>
<input type="time"
list="hours"
placeholder="Select time..">
<datalist id='hours'>
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
<option value="15:00"></option>
</datalist>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 20.0 | 10.0 | 4.0 | No | 9.6 |
