HTML <datalist>

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

構文

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

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

コンテンツモデル

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

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

属性

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

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
HTML文書内で一意な識別子を指定する。

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>
lang
言語を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

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

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

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

参考文献

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