欄位資料清單 <datalist>

<datalist> 是 HTML 表單裡的欄位資料清單元素，通常是輔助 <input> 元素使用，讓使用者除了可以輸入內容，也可以使用下拉選單選擇內容，這篇文章將會介紹欄位資料清單元素的用法。

認識 <datalist>

<datalist> HTML 表單裡的欄位資料清單元素，通常是輔助 <input> 元素使用，讓使用者在輸入內容時，可以透過下拉選單，選擇於先設定好的內容。

• <datalist> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，內容只能放入 <option>。
• <datalist> 的顯示類型為「none 不顯示」。
• <datalist> 不可以是 <a> 或 <button> 的子元素。

例如下方的 HTML 開啟後，會將 <input> 串連 <datalist> 呈現。

<form action="test.aspx" method="get" target="_blank">
  <input type="text" list="test">
  <datalist id="test">
    <option value="apple"></option>
    <option value="banana"></option>
    <option value="orange"></option>
  </datalist>
</form>

<datalist> 支援屬性和預設樣式

<datalist> 除了支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)。下方列出 <label> 的預設樣式：

詳細樣式教學可參考：CSS 教學

datalist {
  display: none;
}

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～