datalistタグ -入力補助の候補リストを提供する｜HTML辞典
<datalist>タグとは？
<datalist> タグは、<input> フィールドに入力補助の候補リストを提供するためのタグです。
候補の一覧を表示しながらも、ユーザーは自由に入力することができます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フォーム関連コンテンツ（Form-associated Content）。
閉じタグの有無
<datalist> は開始タグ（<datalist>）と閉じタグ（</datalist>）の両方が必要です。
基本的な記述方法
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Google Chrome">
<option value="Mozilla Firefox">
<option value="Microsoft Edge">
<option value="Safari">
<option value="Opera">
</datalist>
使用できる主な属性
<datalist> タグ自体には特別な属性はありませんが、関連する <input> タグの list 属性を適切に設定する必要があります。
| 属性名 | 説明 | 例 |
|---|---|---|
id | list 属性と対応する datalist の識別子 | <datalist id="browsers"> |
value | 候補となる値 | <option value="Google Chrome"> |
CSSを使ったデザイン変更
<datalist> 自体のデザインを変更することはできませんが、関連する <input> のデザインを調整できます。
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
適切な使用例
入力補助リストを提供する
<input list="cities" name="city">
<datalist id="cities">
<option value="東京">
<option value="大阪">
<option value="名古屋">
<option value="福岡">
</datalist>
datalist を活用した検索入力
<input list="search-suggestions" name="search">
<datalist id="search-suggestions">
<option value="スマートフォン">
<option value="タブレット">
<option value="ノートパソコン">
</datalist>
省略せずに <option> の value に表示名を指定する
<input list="colors" name="color">
<datalist id="colors">
<option value="Red">赤</option>
<option value="Blue">青</option>
<option value="Green">緑</option>
</datalist>
適切でない使用例（誤った使い方）
<datalist> の id を <input> の list に関連付けないと機能しない
<!-- NG: list属性が設定されていない -->
<input name="browser">
<datalist>
<option value="Chrome">
<option value="Firefox">
</datalist>
正しい書き方（list 属性を指定）
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>
<datalist> の外に <option> を配置すると機能しない
<!-- NG: <option> を <datalist> の外に記述 -->
<option value="Google Chrome">
<input list="browsers" name="browser">
<datalist id="browsers"></datalist>
正しい書き方（<option> を <datalist> 内に配置）
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Google Chrome">
</datalist>
<datalist>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<datalist> | 入力候補のリストを提供 | list 属性とセットで使用 | フリーワード入力 + 候補選択 |
<select> | 選択肢を固定 | <option> を内包 | 明確な選択肢リスト |
<input type="text"> | フリーテキスト入力 | datalist なしでは候補が表示されない | 完全な自由入力 |
<option> | 選択肢を定義 | <select> や <datalist> の子要素 | ユーザー選択肢を提供 |
使用上の注意点
list 属性を使って <datalist> と <input> を関連付ける
listに<datalist>のidを指定しないと機能しない。
<option> の value を適切に設定する
valueを指定しないと、入力補助の候補として認識されない。
<datalist> は全ブラウザ対応ではないため、代替手段を考慮する
- 一部の古いブラウザでは
datalistがサポートされていないため、別途<select>などのUIを検討する。
関連タグ
<input>– ユーザー入力を受け付ける<option>–<datalist>内の個別の候補<select>– 固定の選択リストを作成<label>– 入力フィールドのラベルを設定
まとめ
<datalist> タグは、HTML文書内で <input> フィールドに入力補助の候補リストを提供するためのタグ です。list 属性を正しく設定し、<option> 内に候補を追加することで、ユーザーの入力を補助できます。
