トップページ  > HTML Living Standard  > <datalist>

★HTML Living Standard リファレンス

<datalist> …… 選択肢のデータリストを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<datalist>タグは、選択肢のデータリストを表す際に使用します。

datalist要素の使い方ですが、 datalist要素内に複数のoption要素を配置することで、選択肢リストを定義します。 さらに、datalist要素のid要素の値とinput要素のlist属性の値を同じにすることで、 選択肢リストと入力欄を関連付けます。

■使用例

以下のサンプルは、datalist要素で選択肢リストを定義して、id要素の値によってinput要素と関連付けています。

HTMLソース

<label>
 好きな動物:
 <input name=animal list=animals>
 <datalist id=animals>
  <option value="猫">
  <option value="犬">
 </datalist>
</label>
↓↓↓

ブラウザ上の表示

上記使用例のように、datalist要素内にはoption要素だけを配置するのが最もシンプルな使い方ですが、 datalist要素内にdatalist要素をサポートしていないブラウザ向けのコンテンツを指定することもできます。 この場合、下記使用例のように、datalist要素内に配置したselect要素内にoption要素を配置します。

■使用例

以下のサンプルは、 datalist要素をサポートしていないブラウザに配慮したマークアップです。 datalist要素内に記述された内容は、datalist要素をサポートしていないブラウザでは、 セレクトボックスとして表示されます。

HTMLソース

<label>
 好きな動物:
 <input name=animal list=animals>
</label>
<datalist id=animals>
 <label>
  または、以下の選択肢から選ぶ:
  <select name=animal>
   <option value="">
   <option>猫
   <option>犬
  </select>
 </label>
</datalist>
↓↓↓

ブラウザ上の表示

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ