datalistタグ
datalistは、入力候補を定義するタグです。
解説
datalistタグは、子要素にoptionタグを指定します。
テキストボックスに入力時に入力の候補を表示したい時に使用します。
セレクトボックスだとリストに存在しないものは選択できませんが、データリストであれば手入力も可能なので自由度の高い入力が可能となります。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | フロー・コンテンツ フレージング・コンテンツ |
| コンテキスト (親カテゴリ) | フレージング・コンテンツを許可する場所 |
| コンテンツ・モデル (子カテゴリ) | optionタグ |
属性
datalistタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
datalistを使ったサンプル
<input type="text" name="txt1" list="dtl">
<datalist id="dtl">
<option value="ハンバーグ">
<option value="カレー">
<option value="スパゲッティ">
<option value="オムライス">
<option value="ピラフ">
</datalist>
カーソルを当てると入力候補が表示されます。リストにない入力も可能です。
関連項目
- select：セレクトボックスを作成する
- option：セレクトボックス等の要素を定義する
- input type="text"：テキスト入力欄を作成する
