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

★HTML Living Standard リファレンス

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

<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要素をサポートしていないブラウザでは、select要素が生成するセレクトボックスが表示されます。

HTMLソース

<label>
 好きな動物:
 <input name=animal list=animals>
</label>
<datalist id=animals>
 <label>
  直接入力するか、以下の選択肢から選んでください:
  <select name=animal>
   <option value="">
   <option>猫
   <option>犬
  </select>
 </label>
</datalist>
↓↓↓

ブラウザ上の表示

■関連項目

  • <form> …… フォームを表す
  • <label> …… フォーム入力欄のキャプションを表す
  • <input> …… フォーム入力欄を表す
  • <button> …… ボタンを表す
  • <select> …… セレクトボックスを表す
  • <datalist> …… 選択肢のデータリストを表す
  • <optgroup> …… 選択肢グループを表す
  • <option> …… 選択肢を表す
  • <textarea> …… 複数行プレーンテキストの入力欄を表す
  • <output> …… 実行結果の出力を表す
  • <progress> …… タスクの進行状況を表す
  • <meter> …… 既知の範囲内の測定値を表す
  • <fieldset> …… フォームグループを表す
  • <legend> …… フォームグループのキャプションを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ