HTML datalist 标签

HTML datalist 语法

在 HTML 中，datalist 标签用于为 input 元素提供一个预定义的选项列表。当用户开始输入内容时，浏览器会自动显示一个下拉建议列表，用户可以从中选择已有项，也可以继续输入自定义内容。

语法：

<input type="text" list="选项列表ID">
<datalist id="选项列表ID">
    <option value="值1">
    <option value="值2">
    ……
    <option value="值n">
</datalist>

说明：

datalist 必须与 input 元素的 list 属性一起使用。其中，datalist 的 id 值必须与 input 的 list 值一致，以此关联 datalist 和 input。

在 datalist 中，option 标签通常可以自闭合，而且我们只写 value 就够了。

注意: datalist 的子元素必须是 option。

HTML datalist 摘要

属于	HTML 表单
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML datalist 示例

接下来，我们通过一个简单的例子来讲解一下 HTML datalist 标签是如何使用的。

示例：datalist 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form method="post" action="/">
        <label>选择编程语言：
            <input type="text" list="languages" name="lang_choice" placeholder="请选择或输入">
        </label>
        <datalist id="languages">
            <option value="Python">
            <option value="C">
            <option value="C++">
            <option value="Java">
            <option value="JavaScript">
        </datalist>
    </form>
</body>
</html>

页面效果如下图所示。

HTML datalist标签示例

分析：

当文本框获取焦点时，页面效果如下图 1 所示。如果输入内容时，页面效果如下图 2 所示。

HTML datalist获取焦点的效果

HTML datalist输入内容的效果

在上面例子中，datalist 包含 5 个选项："Python"、"C"、"C++"、"Java"、"JavaScript"。当我们输入文本时，会看到一个可选的下拉列表。你可以选择其中一个选项，或者继续输入自己的文本。