HTML <datalist>タグ


事前定義されたオプションを含むデータリスト(<input>要素に接続):

<label for="browser">Choose your browser from the list:</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>タグは、<input>要素の事前定義されたオプションのリストを指定します。

この<datalist>タグは、<input>要素に「オートコンプリート」機能を提供するために使用されます。ユーザーがデータを入力すると、事前定義されたオプションのドロップダウンリストが表示されます。

要素の<datalist>id属性は、<input>要素のlist属性と同じである必要があります(これにより、要素がバインドされます)。


ブラウザのサポート

表の数字は、要素を完全にサポートする最初のブラウザバージョンを示しています。

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

グローバル属性

この<datalist>タグは、HTMLのグローバル属性もサポートしています。


イベント属性

この<datalist>タグは、HTMLのイベント属性もサポートしています。


関連ページ

HTML DOMリファレンス: データリストオブジェクト


デフォルトのCSS設定

ほとんどのブラウザは<datalist>、次のデフォルト値で要素を表示します。

datalist {
  display: none;
}