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

屬性

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

範例

文本類型

在類型為 textsearchurltelemailnumber 的控制項中,推薦的值在用戶點擊或雙擊控制項時顯示為下拉菜單。通常,控制項的右側也會有一個指向預定值存在的箭頭。

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>

日期和時間類型

類型 monthweekdatetimedatetime-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
# the-datalist-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
datalist

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

參見