どんなタグ？
フォームで入力候補を表示したいとき、
この<datalist>タグを使う。
<body>
<datalist>
<option value="赤"></option>
<option value="青"></option>
<option value="黄"></option>
</datalist>
</body>
<option> 〜
</option>
タグで挟むと入力候補リストとして選択できます。選択肢にない場合は直接入力することも可能です。
- どのカテゴリに属しているの？
- datalistタグはフロー・コンテンツ, フレージング・コンテンツというコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
- datalist タグに梱包できるタグ
（
コンテンツ・モデル）は、フレージング・コンテンツまたは0個以上の
<option>要素です。
あらかじめ入力する内容が想定される場面に使うと便利かも。
どうやって使うの？
<datalist>タグでリストを作り、
<input>タグに紐付けて入力可能にする。
<option>タグで挟んだリストを<datalist> 〜 </datalist> タグで挟み、さらに<input>タグと紐付けをして使用します。
- 使い方
-
<input name="コントロール部品名" list="リスト名"> <datalist id="リスト名"> リスト群 </datalist>
好きな動物： <input name="likeAnimal" list="animalList">
<datalist id="animalList">
<option value="しば犬"></option>
<option value="ねこ"></option>
<option value="うさぎ"></option>
</datalist>https://codehero.shibajuku.net/html/datalist/sample01/
- どこでも使えるの？
datalist要素はフレージング・コンテンツが配置できるところならどこでも使えます。- 気をつけることは？
- リスト項目以外の入力を避けたい場合は、
<select>タグを使用しましょう。
フォームなどで入力候補以外にも選択できるようにしたい場合に使えるね。
使える属性は？
グローバル属性のみ使用できる。
<datalist> タグには、どの要素にでも使えるグローバル属性のみが使えます。
id属性と<input>タグの紐付けを忘れずに！
サンプルが見たい
<datalist>タグを使ったサンプルを
紹介。
<datalist> タグを使ったサンプルを紹介します。
基本的な<datalist>タグのサンプル
<form action="" method="post">
<label>
好きな動物： <input name="likeAnimal" list="animalList">
<datalist id="animalList">
<option value="しば犬"></option>
<option value="ねこ"></option>
<option value="うさぎ"></option>
</datalist>
</label>
</form>https://codehero.shibajuku.net/html/datalist/sample01/
option要素で選択肢を作ろう
デフォルトスタイルは？
デフォルトでは、
簡易的な選択欄が表示される。
datalist 要素はあくまでリスト群のため、input 要素と合わせることで表示ができます。
datalist {
display: none;
}入力欄のサイズなどは input 要素にCSSで指定しましょう。
対応ブラウザは？
モダンブラウザには対応しています。
<datalist>タグは HTML5以降で利用可能で、主に以下のブラウザが対応しています。
ただし、一部のブラウザでは完全にサポートされてない可能性もあります。
- Internet Explorar
- Internet Explorar 10 ~
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome 20 ~
- Firefox
- Firefox 4 ~
- Safari
- Safari 12.1 ~
- Opera
- Opera 10 ~
対応状況はCan I useで確認してください
