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

列印頁面