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

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

■関連項目

Sponsors