<datalist>: HTML データリスト要素
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
試してみましょう
属性
この要素には、すべての要素が持つグローバル属性以外の属性はありません。
例
テキスト型
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 の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。
メモ: type に対応していない場合、単純なテキストフィールドを作成する text
型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。
<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 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。
<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 の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。
<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 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。
<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 Standard # the-datalist-element |
ブラウザーの互換性
BCD tables only load in the browser