HTML - datalist 标签_HTML 菜鸟教程

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

<< HTML - legend 标签 HTML - output 标签 >>