Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

datalist 要素

概要

HTML Datalist 要素 (<datalist>) は、ユーザーに入力候補の選択肢を提供します。その候補となる値を持つ <option> 要素のセットをその子要素として内包します。

コンテンツカテゴリ フローコンテンツフレージングコンテンツ
許可された内容 フレージングコンテンツ、または 0 個以上の <option> 要素
タグの省略 不可。開始と終了タグの両方が必要。
許可された親要素 フレージングコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLDataListElement

属性

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

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

input 要素がその list 属性によって、同じ値を id 属性に持つ datalist 要素に紐付けられています。

ライブ表示でその動作を確認してみてください。「半角の f」を入力してみると分かりやすいでしょう。

表示結果

結果を使用する

<input> 要素の name 属性でコントロールの名前を指定しており、これはフォームデータとともに送信されます。

このフォームデータはサーバ側で、HTTP リクエストから取得できます: String myBrowser = request.getParameter("myBrowser")

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
The definition of '<datalist>' in that specification.
Living Standard  
HTML5
The definition of '<datalist>' in that specification.
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 20 4.0 (2.0) 10 9.5 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 33 4.0 (2.0) 未サポート 10 未サポート

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, ethertank
 最終更新者: yyss,