<datalist>:HTML 資料清單元素

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

嘗試一下

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

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

屬性

此元素除了全域屬性 (en-US)外,沒有其他屬性,這些屬性是所有元素共用的。

範例

文本類型

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

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 (en-US)week (en-US)date (en-US)time (en-US)datetime-local (en-US) 可以顯示一個界面,方便用戶選擇日期和時間。預定值可以在那裡顯示,允許用戶快速填寫控制項的值。

備註: 當類型不受支援時,將使用 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 (en-US) 類型中的推薦值將顯示為用戶可以輕松選擇的一系列哈希標記。

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 (en-US) 類型可以在由瀏覽器提供的界面中顯示預定義的顏色。

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 (en-US) 類型連結,但出於安全原因,沒有瀏覽器支持。

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> (en-US) 元素。
標籤省略 不允許,開始和結束標籤都是必須的。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 listbox (en-US)
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLDataListElement (en-US)

規範

Specification
HTML Standard
# the-datalist-element

瀏覽器相容性

BCD tables only load in the browser

參見