View in EnglishAlways switch to English

<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> 元素，這些元素代表其他控制項中可選擇的允許或推薦選項。

嘗試一下

<label for="ice-cream-choice">Choose a flavor:</label><input list="ice-cream-flavors" name="ice-cream-choice" /><datalist>  <option value="Chocolate"></option>  <option value="Coconut"></option>  <option value="Mint"></option>  <option value="Strawberry"></option>  <option value="Vanilla"></option></datalist>

label {  display: block;  margin-bottom: 10px;}

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

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

<label for="myBrowser">Choose a browser from this list:</label><input list="browsers" name="myBrowser" /><datalist>  <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>  <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" name="tick" /><datalist>  <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" /><datalist>  <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" /><datalist>  <option value="5Mg[_3DnkgSu@!q#"></option></datalist>

無障礙議題

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

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

技術摘要

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