<datalist>タグは、フォームの入力欄などで、入力候補となるデータを定義するものです。候補の項目は、<option>タグで定義します。<datalist>タグをサポートしているブラウザで閲覧すると、<option>タグで定義した値が入力候補として表示されます。今回はHTML5における<datalist>タグの使い方をご紹介します。
HTML5における<datalist>タグの使い方
<datalist>タグは、フォームの入力欄などで、入力候補となるデータを定義するものです。具体的な使用方法としては<datalist>要素に指定したid属性の値と、input要素のlist属性の値を関連づけて使用します。関連付けると、input要素の入力候補に<datalist>要素の項目が表示されるようになります。
|
1 2 3 4 5 |
<datalist id="test"> <option value="A"> <option value="B"> <option value="C"> </datalist> |
input要素と併用した時のサンプルコードです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<form> <fieldset> <input autocomplete="on" list="test" name="q" type="sample" /> <datalist id="test"> <span style="color: #ff0000;"> </span> <option value="A"></option> <option value="B"></option> <option value="C"></option> </datalist> <input type="submit" value="送信" /> </fieldset> </form> |
このように表示されます。
