HTMLのdatalist要素の説明です。datalist要素は、input要素の部品にサジェスト機能を追加するために、その入力候補となるoption要素をとりまとめる要素です。
目次
要素の記述例
datalist要素の記述例
<label for="browser-list">お使いのブラウザを入力してください<br>
<input id="browser-list" type="text" list="browsers" >
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="その他">
</datalist>
</label>
閲覧中ブラウザーでの表示結果
要素の説明
- datalist要素は、input要素の部品にサジェスト機能を追加するために、その入力候補となるoption要素をとりまとめる要素です。
- datalist要素を使ったサジェスト機能は、プルダウン形式で表示されます。
- datalist要素とinput要素を関連付けるためには、datalist要素のid属性の値をinput要素のlist属性の値に定義します。
- datalist要素とその子要素は、サジェスト機能として使用されるとき以外は表示されません。
利用できる属性
グローバル属性
HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。
イベントハンドラ属性
datalist要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。
ブラウザデフォルトCSS設定
Google Chromeの場合
datalist要素のブラウザデフォルトCSS
datalist {
display: none;
}