HTML <datalist> 標簽

定義和用法

<datalist> 標簽為 <input> 元素規定預定義選項的列表。

<datalist> 標簽用于為 <input> 元素提供“自動完成”功能。用戶在輸入數據時，將看到預定義選項的下拉列表。

<datalist> 元素的 id 屬性必須等于 <input> 元素的 list 屬性（這會把它們綁定在一起）。

另請參閱：

HTML DOM 參考手冊：Datalist 對象

實例

擁有預定義選項的數據列表（連接到 <input> 元素）：

<label for="browser">請從列表中選擇您的瀏覽器：</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

親自試一試

全局屬性

<datalist> 標簽還支持 HTML 中的全局屬性。

事件屬性

<datalist> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <datalist> 元素：

datalist {
  display: none;
}

瀏覽器支持

表中的數字注明了首個完全支持該元素的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
20.0 10.0 4.0 12.1 9.5