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

<datalist>

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

フォーム

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<datalist>
20
12
4
12.1
33
12.2
HTML 属性
input_type_color

<input type="color">`でサポート。
20
14
12.1
33
12.2
input_type_date

<input type="date">`のサポート
20
12
14.1
33
14.5
input_type_email

<input type="email">`のサポート
22
12
4
12.1
33
12.2
input_type_number

<input type="number">`でサポート。
22
12
4
12.1
33
12.2
input_type_range

<input type="range">`のサポート
20
12
110
12.1
57
12.2
input_type_search

<input type="search">`のサポート
22
12
4
12.1
33
12.2
input_type_tel

<input type="tel">`でサポート。
22
12
4
12.1
33
12.2
input_type_text

入力タイプ="text">`のサポート
20
12
4
12.1
33
12.2
input_type_time

<input type="time">`でサポート。
20
12
14.1
33
12.2
input_type_url

<input type="url">`のサポート
22
12
4
12.1
33
12.2
DOM API
HTMLDataListElement

HTMLDataListElement インターフェイスは、（継承元である HTMLElement オブジェクトインターフェイスからの継承によって利用できるもの以外に） 要素およびその内容を操作するための特別なプロパティを提供します。
20
12
4
12.1
25
12.2
options

HTMLDataListElement インターフェイスの options read-only プロパティは、データリストに含まれる HTMLOptionElement 要素の HTMLCollection を返します。子孫の option 要素は、.
20
12
4
12.1
25
12.2
その他
html.elements.input.type_color.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
20
14
12.1
33
12.2
html.elements.input.type_date.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
20
12
14.1
33
14.5
html.elements.input.type_email.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
22
12
4
12.1
33
12.2
html.elements.input.type_number.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
22
12
29
12.1
33
12.2
html.elements.input.type_range.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
20
12
110
12.1
57
12.2
html.elements.input.type_search.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
22
12
4
12.1
33
12.2
html.elements.input.type_tel.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
22
12
4
12.1
33
12.2
html.elements.input.type_text.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
20
12
4
12.1
33
12.2
html.elements.input.type_time.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
20
12
14.1
33
12.2
html.elements.input.type_url.list

list 属性で与えられる値は、同じ文書内にある datalist 要素の Element.id としてください。 は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに type と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。
22
12
4
12.1
33
12.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<label for="browser">Select a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</option></option></option></option></datalist>

ライブデモ

basic o-tconpri-t

Input to auxlist provide.input and.. with datalist

プレビュー全画面表示

programingword languageselection

selectionoption provide.input also possible. with datalist

プレビュー全画面表示

usage with Multiplefield.

different datalist multiple. Inputfield to.

プレビュー全画面表示

実務での使いどころ

  • <datalist> の活用

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

注意点

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

アクセシビリティ

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

参考リンク