<datalist>：HTML 資料清單元素

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

<datalist> HTML 元素包含一組 <option> 元素，這些元素代表其他控制項中可選擇的允許或推薦選項。

嘗試一下

要將 <datalist> 元素綁定到控制項，我們在 id 屬性中給予它一個唯一標識符，然後在具有相同標識符值的 <input> 元素中添加 list 屬性。只有某些類型的 <input> 支援此行為，並且在不同的瀏覽器中可能也會有所不同。

備註： <option> 元素可以將值存儲為內部內容和 value 和 label 屬性。在下拉選單中哪一個將可見取決於瀏覽器，但單擊時，輸入到控制欄中的內容始終來自 value 屬性。

屬性

此元素除了全域屬性外，沒有其他屬性，這些屬性是所有元素共用的。

範例

文本類型

在類型為 text、search、url、tel、email 和 number 的控制項中，推薦的值在用戶點擊或雙擊控制項時顯示為下拉菜單。通常，控制項的右側也會有一個指向預定值存在的箭頭。

html

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

日期和時間類型

類型 month、week、date、time 和 datetime-local 可以顯示一個界面，方便用戶選擇日期和時間。預定值可以在那裡顯示，允許用戶快速填寫控制項的值。

备注： 當類型不受支援時，將使用 text 類型創建簡單的文本字段。該字段將正確識別推薦值並將其顯示給用戶作為下拉菜單。

html

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

範圍類型

在 range 類型中的推薦值將顯示為用戶可以輕松選擇的一系列哈希標記。

html

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

顏色類型

color 類型可以在由瀏覽器提供的界面中顯示預定義的顏色。

html

<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

密碼類型

規範允許將 <datalist> 與 password 類型連結，但出於安全原因，沒有瀏覽器支持。

html

<label for="pwd">Enter a password:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

無障礙議題

在決定使用 <datalist> 元素時，請注意以下一些無障礙性問題：

數據列表選項的字體大小不會放大，始終保持相同大小。在縮放或放大其餘內容時，自動建議的內容不會增大或減小。
由於使用 CSS 定位列表選項的能力非常有限甚至不存在，因此無法為高對比度模式設置渲染樣式。
一些屏幕閱讀器/瀏覽器組合（包括 NVDA 和 Firefox）不會宣告自動建議彈出窗口的內容。

技術摘要

內容類型	流內容、段落型內容。
允許的內容	段落型內容，或是零個或多個 `<option>` 元素。
標籤省略	不允許，開始和結束標籤都是必須的。
允許的父元素	任何接受段落型內容的元素。
隱含的 ARIA 角色	`listbox`
允許的 ARIA 角色	不允許 `role`
DOM 介面	`HTMLDataListElement`

規範

Specification
HTML Standard # the-datalist-element

瀏覽器相容性

BCD tables only load in the browser

參見

<input> 元素，特別是其 list 屬性；
<option> 元素。