<datalist>:HTML 資料清單元素
<datalist>
HTML 元素包含一組 <option>
(en-US) 元素,這些元素代表其他控制項中可選擇的允許或推薦選項。
嘗試一下
要將 <datalist>
元素綁定到控制項,我們在 id
(en-US) 屬性中給予它一個唯一標識符,然後在具有相同標識符值的 <input>
(en-US) 元素中添加 list
(en-US) 屬性。只有某些類型的 <input>
(en-US) 支援此行為,並且在不同的瀏覽器中可能也會有所不同。
備註: <option>
元素可以將值存儲為內部內容和 value
和 label
屬性。在下拉選單中哪一個將可見取決於瀏覽器,但單擊時,輸入到控制欄中的內容始終來自 value
屬性。
屬性
此元素除了全域屬性 (en-US)外,沒有其他屬性,這些屬性是所有元素共用的。
範例
文本類型
在類型為 text (en-US)、search (en-US)、url (en-US)、tel (en-US)、email (en-US) 和 number (en-US) 的控制項中,推薦的值在用戶點擊或雙擊控制項時顯示為下拉菜單。通常,控制項的右側也會有一個指向預定值存在的箭頭。
<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
類型創建簡單的文本字段。該字段將正確識別推薦值並將其顯示給用戶作為下拉菜單。
<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) 類型中的推薦值將顯示為用戶可以輕松選擇的一系列哈希標記。
<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) 類型可以在由瀏覽器提供的界面中顯示預定義的顏色。
<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) 類型連結,但出於安全原因,沒有瀏覽器支持。
<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
參見
<input>
(en-US) 元素,特別是其list
(en-US) 屬性;<option>
(en-US) 元素。