Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。
フォーム Limited support

<datalist>

<datalist> 要素は、<input> 要素に対する候補値のリストを提供します。オートコンプリート機能を実現できます。

フォーム

概要

<datalist> 要素は、<input> 要素に対する候補値のリストを提供します。オートコンプリート機能を実現できます。

対応ブラウザ

デスクトップ

Chrome 69+
Edge 12+
Safari 12.1+
Firefox 110+

モバイル

Chrome Android 69+
Safari iOS 12.2+
Firefox Android 未対応

基本構文

HTML 
<label for="browser">ブラウザを選択:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

実務での使いどころ

  • <datalist> の活用

    入力欄の候補リストを提供する要素。<input> の list 属性と連携。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク