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