<datalist>: DATALIST 要素
最終更新：2026-10-13
<datalist>DATALIST 要素
input に候補値のリスト（ドロップダウン表示）を提供しつつ、自由入力も許可します。input の list 属性と組み合わせます。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </datalist> タグ |
| ステータス | 標準 |
📝 構文
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <datalist> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： datalist 自体は表示されません。input の list 属性から参照します。ヒントの見た目はブラウザーによって異なります。
❓ よくある質問
Qdatalist と select の違いは何ですか？
A
<datalist> は <input list> と組み合わせて「入力もできる＋候補も選べる」を提供します。ユーザーは自由に入力でき、候補リストから選ぶこともできます。<select> は固定の選択肢からしか選べません。固定値に限定するなら select、自由入力を許すなら datalist です。Qdatalist と input の関連付けはどうやりますか？
Adatalist に
id を付け、input に同名の list 属性を付けます：<input list='cities'><datalist id='cities'>…</datalist>。1つの datalist は複数の input に使えますが、逆に1つの input が一度に関連付けられる datalist は1つだけです。Qdatalist の互換性に問題はありますか？
A現代のブラウザはすべて対応していますが、インタラクションの見た目の差が大きいです。Chrome はドロップダウン矢印を、Safari は候補のフロートを表示します。候補項目のスタイルはカスタマイズできません。この制限をあらかじめ受け入れるか、JS のオートコンプリートコンポーネントに切り替えましょう。
🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
