<datalist> …… 選択肢のデータリストを表す

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

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

■使用例

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

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

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

Sponsors