<datalist>タグの解説
<datalist>は、フォームの入力欄に候補となる選択肢やオプションを提供します。例えば、<input>で作られたテキストエリアに入力が予想される候補を事前に用意しておく場合に使用します。
入力候補となるデータは、<datalist>の子要素に配置した<option>で定義します。そして、データを提供する要素のlist属性に指定した値を<datalist>のid属性で参照して関連付けます。
<datalist>の範囲内に記述された内容は、ユーザーが操作しない限りブラウザ上の見た目には表示されません。
<datalist>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられませんが、ユーザーが操作した場合にポップアップリストなどが表示されます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<datalist>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<datalist>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<datalist>は他のデータフィールドのためにあらかじめ選択肢を用意する要素です。これ自体は画面に表示されることを想定していません。基本的には、対象の<input>に指定されたlist属性の値を自身のid属性で参照して接続します。
<input type="text" list="text">
<datalist id="text">
<option value="text 1">
<option value="text 2">
<option value="text 3">
</datalist>
この要素を使用する場面で最初に思いつくのは検索窓です。例えば、サイト内に検索フォームを設置する場合、候補となるキーワードをリスト化してユーザーに提示できます。
<form class="sample-block">
<input type="search" name="q" list="keywords">
<datalist id="keywords">
<option value="キーワードA">
<option value="キーワードB">
<option value="キーワードC">
</datalist>
<button type="button">検索</button>
</form>
日付や時刻を表すデータ形式を提供する
<input>のtype属性に指定された値が"date"、"month"、"week"、"time"あるいは"datetime-local"である場合、日付や時刻を表すデータ形式を提供できます。
<input type="time" list="wakeup">
<datalist id="wakeup">
<option value="06:00">
<option value="07:00">
<option value="08:00">
</datalist>
範囲を表すデータ形式提供する
<input>のtype属性に指定された値が"range"である場合、選択範囲に目安を表示するデータを提供できます。
<input type="range" list="score" min="0" max="100">
<datalist id="score">
<option value="20">
<option value="40">
<option value="60">
<option value="80">
</datalist>
色を表すデータ形式提供する
<input>のtype属性に指定された値が"color"である場合、色を扱うデータを提供できます。対応しているブラウザでは、<input>要素がアクティブになった際にカラーピッカーを表示します。そこにあらかじめ定義した色の候補を表示させることができます。
<input type="color" list="pickup">
<datalist id="pickup">
<option value="#0033ff">
<option value="#0066ff">
<option value="#0099ff">
<option value="#00ccff">
<option value="#00ffff">
</datalist>