HTML - <datalist> 标签

HTML <datalist> 标签用于为 <input> 元素指定预定义选项列表，它为输入元素提供自动完成功能。当用户点击输入字段时，将显示预定义选项的下拉列表。<datalist> 标签的 id 属性等于输入字段的 list 属性。HTML <datalist> 元素包含一组 <option> 元素，这些元素代表可供选择的其他控件中的可接受或推荐选项。

语法

<datalist>....</datalist>

属性

HTML datalist 标签支持 HTML 的全局和事件属性。

HTML datalist 标签示例

下面的示例将说明 datalist 标签的用法、何时以及如何使用它来创建 datalist。

创建 HTML Datalist

在下面的示例中，我们将使用 datalist 标签而不使用 input 元素。它生成的输出在网页上不会显示任何内容，因为我们使用了没有任何 option 元素的 datalist 标签。

<!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 标签与 input 元素一起使用，例如带有 option 元素的值和文本。

<!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

在下面的示例中，我们将创建一个数据列表，其中值将被预先选中。选中值将不可更改。要使其可更改，请使用 HTML <select> 标签而不是 HTML <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>

支持的浏览器

标签
button	是 20.0	是 10.0	是 4.0	是 12.1	是 9.5

html_tags_reference.htm

打印页面