HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<datalist>
データリスト要素。<input> 要素に対して、入力候補（サジェスト）のリストを提供します。
info
概要
<datalist> 要素は、フォームの <input> 要素に対して、入力時に表示される**推奨されるオプションのリスト**を含みます。
ユーザーはリストからオプションを選択することも、リストにない独自の値を入力することも可能です。
<input> 要素の list 属性に、<datalist> 要素の id を指定することで関連付けます。
play_circle
デモ (静的表示)
HTML (Source)
<label for="fruit-choice">好きな果物:</label>
<input list="fruits" id="fruit-choice" name="fruit">
<datalist id="fruits">
<option value="りんご">
<option value="バナナ">
<option value="みかん">
<option value="ぶどう">
</datalist>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| グローバル属性 | <datalist> 要素は、id, class, style, title などの**すべてのグローバル属性**をサポートします。特に id 属性は、対応する <input> 要素と連携するために必須です。 |
code
実用例
1. 入力候補リストの基本形
<label for="browsers">使用ブラウザ:</label>
<input list="browser-list" id="browsers" name="browser">
<datalist id="browser-list">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
</datalist>
2. オプションにラベルを設定（一部ブラウザのみ対応）
<datalist id="colors">
<option value="Red" label="赤"></option>
<option value="Blue" label="青"></option>
</datalist>
<!-- <input>とlist="colors"で関連付けます -->
3. 適切な <input type> との組み合わせ
<!-- 日付のサジェストに利用 -->
<input type="date" list="recent-dates">
<!-- 範囲のサジェストに利用 -->
<input type="range" list="range-marks">
lightbulb
知っておくべき重要事項
important_devices
<select> 要素との違い
<select> 要素は、ユーザーが**リスト内のオプションしか選択できない**（強制する）場合に用います。一方、<datalist> はリストを**推奨の候補**として提示し、ユーザーはリストにない値を入力できます。
accessibility_new
アクセシビリティ
<input> 要素と <datalist> を関連付ける際は、必ず <input> に <label> 要素を用いてラベルを設定し、また list 属性で <datalist> と正しく関連付けてください。これはスクリーンリーダー利用者にとって重要です。