このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<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> 要素の集合が含まれ、他のコントロール内で選択できる許容または推奨オプションを表します。
試してみましょう
<label for="ice-cream-choice">Choose a flavor:</label><input list="ice-cream-flavors" name="ice-cream-choice" /><datalist> <option value="Chocolate"></option> <option value="Coconut"></option> <option value="Mint"></option> <option value="Strawberry"></option> <option value="Vanilla"></option></datalist>label { display: block; margin-bottom: 10px;}<datalist> 要素をコントロールに結びつけるには、id 属性で固有の識別子を与え、同じ識別子を値としたlist 属性を<input> 要素に追加します。この動作は、特定の種類の<input> だけが対応しており、また、ブラウザーの種類によっても異なる場合があります。
メモ:<option> 要素は内部コンテンツとして、またvalue 属性とlabel 属性に値を格納することができます。ドロップダウンメニューでどちらが表示されるかはブラウザーに依存しますが、クリックされたときに制御フィールドに入力されるコンテンツは常にvalue 属性に由来します。
属性
この要素には、すべての要素が持つグローバル属性以外の属性はありません。
例
テキスト型
text、search、url、tel、email、number の各型は、ユーザーがコントロールをクリックまたはダブルクリックすると、ドロップダウンメニューで表示されます。通常、コントロールの右側には、定義済みの値があることを示す矢印もあります。
<label for="myBrowser">一覧からブラウザーを選択して下さい:</label><input list="browsers" name="myBrowser" /><datalist> <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 の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。
メモ:type に対応していない場合、単純なテキストフィールドを作成するtext 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。
<input type="time" list="popularHours" /><datalist> <option value="12:00"></option> <option value="13:00"></option> <option value="14:00"></option></datalist>範囲型
range 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。
<label for="tick">Tip amount:</label><input type="range" list="tickmarks" min="0" max="100" name="tick" /><datalist> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option></datalist>色型
color の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。
<label for="colors">色を選択して下さい（できれば赤系）:</label><input type="color" list="redColors" /><datalist> <option value="#800000"></option> <option value="#8B0000"></option> <option value="#A52A2A"></option> <option value="#DC143C"></option></datalist>パスワード型
仕様書では<datalist> をpassword 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。
<label for="pwd">パスワードを入力:</label><input type="password" list="randomPassword" /><datalist> <option value="5Mg[_3DnkgSu@!q#"></option></datalist>技術的概要
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
|---|---|
| 許可されている内容 | 記述コンテンツ、または 0 個以上の<option> 要素のどちらか |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | listbox |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | HTMLDataListElement |
仕様書
| Specification |
|---|
| HTML # the-datalist-element |