HTML の <datalist> 要素は、他のコントロールで利用可能な値を表現する一連の <option> 要素を含みます。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
| コンテンツカテゴリ | フローコンテンツ、記述コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ、または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> の定義 |
勧告 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Edge Mobile | Android 版 Firefox | Android 版 Opera | iOS 版 Safari | Samsung Internet | |
| 基本対応 | Chrome 完全対応 20 | Edge 完全対応 あり | Firefox 完全対応 4 | IE 完全対応 10 | Opera 完全対応 9.5 | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 完全対応 33 | Edge Mobile 完全対応 あり | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 あり |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
代替手段
古いブラウザーや非互換の現行ブラウザーで対応するための代替手段 (polyfill) を以下に挙げます。
datalist-polyfill