datalist 要素入力候補の選択肢を提供する

datalist 要素は閲覧者に入力候補の選択肢を提供します。入力候補は、内包する option 要素で提供することができます。この要素、および内包される要素は、画面上にレンダリングされません。

datalist 要素は、要素に付与された id 属性値と input 要素に付与された list 属性によって関連付けを行うことができます。関連づけられた input 要素において、datalist 要素はサジェストとして機能します。

対応するブラウザでは、入力欄で「↓」キーを押したり、入力欄をダブルクリックすると入力候補が表示されます。また、入力内容によってサジェスト機能のように働きます。

datalist 要素の仕様

カテゴリ
コンテンツモデル
  • または 0個以上の option 要素、およびスクリプト支援要素のいずれか
この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性

datalist 要素のサンプルソース

<input list="arealist" tyle="text" name="area" value="" />
<datalist id="arealist">
 <option value="東京都" />
 <option value="埼玉県" />
 <option value="群馬県" />
 <option value="神奈川県" />
 <option value="千葉県" />
</datalist>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.10.8 The datalist element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ