HTML <datalist> データリスト要素"

試してみましょう

<label for="ice-cream-choice">味を選んでください:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="チョコレート"></option>
  <option value="ココナッツ"></option>
  <option value="ミント"></option>
  <option value="イチゴ"></option>
  <option value="バニラ"></option>
</datalist>

label {
  display: block;
  margin-bottom: 10px;
}

<datalist> 要素をコントロールに結びつけるには、id 属性で固有の識別子を与え、同じ識別子を値とした list 属性を <input> 要素に追加します。 この動作は、特定の種類の <input> だけが対応しており、また、ブラウザーの種類によっても異なる場合があります。

それぞれの <option> 要素には、入力欄に入力される候補を表す value 属性を指定する必要があります。また、label 属性を指定することも可能です。もし label 属性が指定されていない場合は、テキストコンテンツを記述することで、ブラウザーによっては value の代わりに (Firefox)、あるいは value に加えて（Chrome や Safari では補足テキストとして）表示されることがあります。ドロップダウンメニューの具体的なコンテンツはブラウザーによって異なりますが、クリックされた際、コントロールフィールドに入力される内容は常に value 属性から決まります。

属性

この要素には、すべての要素が持つグローバル属性以外の属性はありません。

アクセシビリティ

<datalist> 要素を使用する際には、以下のアクセシビリティ上の課題に留意する必要があります。

• データリストの選択肢のフォントサイズは拡大・縮小されず、常に同じサイズのままです。他のコンテンツの表示を拡大・縮小しても、サジェスト機能の内容は拡大・縮小されません。
• 選択肢リストを対象として CSS で指定することは、とても制限されているため、ハイコントラストモードでの表示スタイル設定はできません。
• 一部のスクリーンリーダーとブラウザーの組み合わせ、例えば NVDA と Firefox では、自動入力候補のポップアップのコンテンツが読み上げられません。

例

テキスト型

text、search、url、tel、email、number の各型は、ユーザーがコントロールをクリックまたはダブルクリックすると、ドロップダウンメニューで表示されます。 通常、コントロールの右側には、定義済みの値があることを示す矢印もあります。

<label for="myBrowser">一覧からブラウザーを選択して下さい:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

日付と時刻型

month、week、date、time、datetime-local の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。

<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>

範囲型

range 入力型に関連付けられたデータリスト用に指定された <option> 要素に value 属性が含まれている場合、それらはユーザーが簡単に選択できる一連の目盛として示されます。

<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10" label="Minimum Tip"></option>
  <option value="20" label="Standard"></option>
  <option value="30" label="Generous"></option>
  <option value="50" label="Very Generous"></option>
</datalist>

色型

color の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。

<label for="colors">色を選択して下さい（赤系がおすすめ）:</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>

技術的概要

仕様書

ブラウザーの互換性

関連情報

• <input> 要素、特に list 属性
• <option> 要素