HTML <datalist>

<datalist>はフォームの入力値として利用できるデータリストを定義するHTMLタグです。datalist要素の使い方をご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。datalist 要素の終了タグは省略できない。

<datalist>
  <!--- option elements -->
</datalist>

<DATALIST>
  <!--- option elements -->
</DATALIST>

使用例

datalist 要素の使用例を以下に示す。

値とラベルの選択肢

<label for="bank">金融機関コードを入力してください:</label>
<input list="bank-list" id="bank" name="bank" />
<datalist id="bank-list">
<option value="0001">みずほ銀行</option>
  <option value="0005">三菱UFJ銀行</option>
  <option value="0009">三井住友銀行</option>
  <option value="9900">ゆうちょ銀行</option>
</datalist>

範囲の選択肢

<input type="range" list="scale">
<datalist id="scale">
  <option value="0">0</option>
  <option value="20">20</option>
  <option value="40">40</option>
  <option value="60">60</option>
  <option value="80">80</option>
  <option value="100">100</option>
</datalist>

色の選択肢

<label for="colors">色を選んでください:</label>
<input type="color" list="colorslist" id="colors">
<datalist id="colorslist">
  <ption value="#FF0000"></option>
  <ption value="#00FF00"></option>
  <ption value="#0000FF"></option>
</datalist>

対応ブラウザ

• Apple Safari
• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Opera

コンテンツモデル

datalist 要素の開始タグと終了タグの間には、以下に示すいずれかの要素を含めることができる。

• 0 個以上の option 要素
• フレージング・コンテンツ

フレージング・コンテンツとは、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <area>（マップ要素の子孫である場合）
• <audio>
• <b>
• <bdi>
• <bdo>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <dfn>
• <em>
• <embed>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <link>（本文中で許可されている場合）
• <map>
• <mark>
• <math>
• <meta>（itemprop 属性が存在する場合）
• <meter>
• <noscript>
• <object>
• <output>
• <picture>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <select>
• <slot>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <template>
• <textarea>
• <time>
• <u>
• <var>
• <video>
• <wbr>
• 自律型カスタム要素

属性

以下に示す属性をdatalist要素に指定できる。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

HTML文書内で一意な識別子を指定する。

lang

言語を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScript からは HTMLDataListElement インタフェースを通じて datalist 要素へアクセスできる。

HTMLDataListElement インタフェースは以下に示すプロパティを持つ。

options

オプションのコレクション

参考文献

Web Hypertext Application Technology Working Group (2022) The datalist element HTML Living Standard