HTML5における＜datalist＞タグの使い方

<datalist>タグは、フォームの入力欄などで、入力候補となるデータを定義するものです。候補の項目は、<option>タグで定義します。<datalist>タグをサポートしているブラウザで閲覧すると、<option>タグで定義した値が入力候補として表示されます。今回はHTML5における<datalist>タグの使い方をご紹介します。

HTML5における<datalist>タグの使い方

<datalist>タグは、フォームの入力欄などで、入力候補となるデータを定義するものです。具体的な使用方法としては<datalist>要素に指定したid属性の値と、input要素のlist属性の値を関連づけて使用します。関連付けると、input要素の入力候補に<datalist>要素の項目が表示されるようになります。

<datalist id="test">
<option value="A">
<option value="B">
<option value="C">
</datalist>

input要素と併用した時のサンプルコードです。

<form>
  <fieldset>
    <input autocomplete="on" list="test" name="q" type="sample" /> 
    <datalist id="test">
　　　　　　　　<option value="A"></option>
　　　　　　　　<option value="B"></option>
　　　　　　　　<option value="C"></option>
    </datalist> 
    <input type="submit" value="送信" />
  </fieldset>
</form>

このように表示されます。