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