<datalist>

HTML の <datalist> 要素は、他のコントロールで利用可能な値を表現する一連の <option> 要素を含みます。

コンテンツカテゴリ フローコンテンツ、記述コンテンツ
許可されている内容 記述コンテンツ、または 0 個以上の <option> 要素のどちらか
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
許可されている ARIA ロール なし
DOM インターフェイス HTMLDataListElement

属性

この要素には、すべての要素が持つグローバル属性以外の属性はありません。

例

<label for="myBrowser">一覧からブラウザーを選択して下さい:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

結果

仕様書

仕様書 状態 備考
HTML Living Standard
<datalist> の定義		 現行の標準
HTML5
<datalist> の定義		 勧告

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
datalistChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 9.5Safari 完全対応 12.1WebView Android 完全対応 4.4.3Chrome Android 完全対応 33Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 Since Firefox for Android 79, the dropdown menu containing available options does not appear. See bug 1535985.
Opera Android 部分対応 一部
補足
部分対応 一部
補足
補足 The dropdown menu containing available options does not appear in Opera for Android.
Safari iOS 完全対応 12.2Samsung Internet Android 完全対応 2.0

凡例

完全対応  
完全対応
部分対応  
部分対応
実装ノートを参照してください。
実装ノートを参照してください。

代替手段

古いブラウザーや非互換の現行ブラウザーで対応するための代替手段 (polyfill) を以下に挙げます。
datalist-polyfill

関連情報