最終更新日

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」外部リンク
HOME