<optgroup>タグは、<select>要素内の選択肢をグループ化するために使用するタグです。今回は、HTML5における<optgroup>タグの使い方をご紹介します。
HTML5における<optgroup>タグの使い方
<select>要素でユーザーが選択できるセレクトメニューを作るとき、選択肢は<option>タグで作成します。下記のサンプルコードのようになると思います。
|
1 2 3 4 5 6 |
<select name="color"> <option value="">色を選択してください</option> <option value="1">赤</option> <option value="2">青</option> <option value="3">黄</option> </select> |
表示サンプルです。セレクトメニューは、クリックすると、画像のように表示されます。
選択肢が３つほどであれば、グループ分けは必要ないと思いますが、選択肢が増えてきた場合、ユーザーが選択したいものを見つけやすいようにカテゴリーごとに分けてあげると使いやすいです。そのときに使用するのが、<optgroup>です。
|
1 2 3 4 5 6 7 8 9 10 |
<select name="好きな色"> <option value="">色</option> <optgroup label="暖色"> <option value="1">赤</option> <option value="3">黄</option> </optgroup> <optgroup label="寒色"> <option value="2">青</option> </optgroup> </select> |
表示サンプルです。「暖色」と「寒色」にグループ分けしてみました。上記のサンプルコードのように、分けたい選択肢を<optgroup>で囲んでlabelでグループの名前をつけて使用します。
注意点としては、label属性で名前を指定しないと、optgroup要素で選択肢を囲んでも何も起きないので、必ず指定する必要があるということです。基本的な使い方は以上です。
