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

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

<datalist>HTML の要素で、この要素には <option> 要素の集合が含まれ、他のコントロール内で選択できる許容または推奨オプションを表します。

試してみましょう

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

メモ: <option> 要素は内部コンテンツとして、また value 属性と label 属性に値を格納することができます。ドロップダウンメニューでどちらが表示されるかはブラウザーに依存しますが、クリックされたときに制御フィールドに入力されるコンテンツは常に value 属性に由来します。

属性

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

テキスト型

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

html
<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>

日付と時刻型

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

メモ: type に対応していない場合、単純なテキストフィールドを作成する text 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。

html
<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 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。

html
<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"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>

色型

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

html
<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>

パスワード型

仕様書では <datalist>password 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。

html
<label for="pwd">パスワードを入力:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[_3DnkgSu@!q#"></option>
</datalist>

技術的概要

コンテンツカテゴリー フローコンテンツ記述コンテンツ
許可されている内容 記述コンテンツ、または 0 個以上の <option> 要素のどちらか
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール listbox
許可されている ARIA ロール なし
DOM インターフェイス HTMLDataListElement

仕様書

Specification
HTML
# the-datalist-element

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
datalist

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報