<datalist>: HTML 資料列表元素

有限可用性

此功能不是基線，因為它在一些最廣泛使用的瀏覽器中不起作用。

<datalist> HTML 元素包含一組 <option> 元素，這些元素表示其他控制元件中可供選擇的允許或建議的選項。

試試

要將 <datalist> 元素繫結到控制元件，我們在 id 屬性中為它提供一個唯一的識別符號，然後將 list 屬性新增到 <input> 元素，並使用相同的識別符號作為值。只有某些型別的 <input> 支援此行為，並且它也可能因瀏覽器而異。

每個 <option> 元素都應該有一個 value 屬性，該屬性表示建議輸入到輸入框中的值。它也可以有一個 label 屬性，或者，如果沒有，則可以使用一些文字內容，該內容可能由瀏覽器顯示而不是 value（Firefox），或者除了 value（Chrome 和 Safari，作為補充文字）。下拉選單的確切內容取決於瀏覽器，但在點選時，輸入到控制元件欄位中的內容始終來自 value 屬性。

注意： <datalist> 不是 <select> 的替代品。<datalist> 本身不代表一個輸入；它是一個與關聯控制元件相關的建議值的列表。該控制元件仍然可以接受任何透過驗證的值，即使該值不在此建議列表中。

屬性

此元素除了對所有元素通用的全域性屬性外沒有其他屬性。

可訪問性

在決定使用 <datalist> 元素時，以下是一些需要牢記的可訪問性問題

資料列表選項的字型大小不會縮放，始終保持相同的大小。當其他內容放大或縮小時，自動建議的內容不會增長或縮小。
由於使用 CSS 針對選項列表非常有限，甚至不存在，因此無法針對高對比度模式進行樣式化渲染。
一些螢幕閱讀器/瀏覽器組合，包括 NVDA 和 Firefox，不會宣佈自動建議彈出視窗的內容。

示例

文字型別

在型別 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>

技術總結

內容類別	流內容、短語內容。
允許的內容	要麼是短語內容，要麼是零個或多個 `<option>` 元素。
標籤省略	沒有，開始標籤和結束標籤都是必須的。
允許的父級	任何接受短語內容的元素。
隱式 ARIA 角色	listbox
允許的 ARIA 角色	不允許使用 `role`
DOM 介面	`HTMLDataListElement`

規範

規範
HTML 標準 # the-datalist-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參見

<input> 元素，更準確地說是它的 list 屬性；
<option> 元素。