datalist要素はHTML5から新たに追加された要素です。

他のフォームコントロールのために予め用意された値の候補となるoption要素のセットを表します。

単一行テキストフィールドのinput要素のlist属性でdatalist要素のid属性を指定することで、入力値のサジェストをすることができます。

使用例

<label>キーワードを入力してください <input type="search" name="q" list="keywords"></label>



<datalist id="keywords">

<option>hoge</option>

<option>fuga</option>

<option>piyo</option>

<option>ponyo</option>

</datalist>

使用可能な属性

  • すべてのグローバル属性

コンテンツカテゴリ

  • フローコンテンツ
  • フレージングコンテンツ

子要素にしていい要素の種類

親要素にしていい要素の種類

  • フレージングコンテンツが期待されているすべての要素

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年12月26日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報