最終更新日 2021年4月7日

datalist要素

datalist要素は、フォームの入力欄などで、入力候補となるデータリストを示します。datalist要素を、input要素の各タイプと組み合わせて使用することで、それぞれの入力の種類に応じた入力候補リストを提供することが可能です。datalist要素のid属性で指定した文字列を、input要素のlist属性で指定し、入力項目とその候補リストを関連付けます。

datalist要素は、Phrasingコンテンツの記述箇所で使用できます。

HTML5での変更点

・datalist要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
Flowコンテンツ Phrasingコンテンツ	省略不可	Phrasingコンテンツを子にできる要素	Phrasingコンテンツ、option

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <p>商品名を入力して下さい。</p>
  <input type="text" list="product">
  <datalist id="product">
    <option value="ハンバーガー">
    <option value="チーズバーガー">
    <option value="フィレオフィッシュ">
    <option value="てりやきバーガー">
    <option value="ベーコンレタスバーガー">
  </datalist>
</body>

参考文献：W3C HTML5「4.10.10 The datalist element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。