HTML <datalist>标签用于为<input>元素指定预定义选项列表，它为输入元素提供自动完成功能，当用户点击输入字段时，他们将显示预定义选项的下拉列表。<datalist>标签的id属性等于输入字段的list属性。HTML <datalist> 元素包含一组 <option> 元素，这些元素表示在其他控件中可供选择的可接受或推荐的选项。
语法
<datalist>....</datalist>
属性
<datalist>标签支持 HTML 的 全局属性 和 事件属性。
<datalist>标签示例
下面的示例将说明<datalist>标签的使用，在哪里，何时以及如何使用它来创建datalist。
<datalist>标签创建数据列表
在下面的示例中，我们将使用不带输入元素的<datalist>标签。它将生成一个输出，在网页上不显示任何内容。因为我们使用的是 <datalist>标签，而没有任何 option 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Datalist</title>
</head>
<body>
<form>
<strong>HTML datalist Tag</strong>
<br>
<input list="values">
<!-- HTML datalist -->
<datalist id="values">
</datalist>
</form>
</body>
</html>
<datalist>创建包含值和文本的数据列表
在此示例中，我们将使用 <datalist>标签以及输入元素，例如 value 和带有选项元素的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Datalist</title>
</head>
<body>
<form>
<strong>HTML datalist Tag</strong>
<br>
<input list="values" name="answer">
<!-- HTML datalist -->
<datalist id="values">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</datalist>
</form>
</body>
</html>
<datalist>标签创建具有选定值的数据列表
在以下示例中，我们将创建一个数据列表，其中的值将被预先选择。要使其可使用 <select> 标签而不是 <datalist>标签，所选值将不可更改。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Datalist</title>
</head>
<body>
<form>
<strong>HTML datalist Tag</strong>
<br>
<input list="values" name="answer" value="HTML">
<!-- HTML datalist -->
<datalist id="values">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</datalist>
</form>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <datalist> | Yes | Yes | Yes | Yes | Yes |
