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

<optgroup>タグは、<select>要素内の選択肢をグループ化するために使用するタグです。今回は、HTML5における<optgroup>タグの使い方をご紹介します。

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

<select>要素でユーザーが選択できるセレクトメニューを作るとき、選択肢は<option>タグで作成します。下記のサンプルコードのようになると思います。

表示サンプルです。セレクトメニューは、クリックすると、画像のように表示されます。

スクリーンショット 2016-06-28 13.53.16

選択肢が3つほどであれば、グループ分けは必要ないと思いますが、選択肢が増えてきた場合、ユーザーが選択したいものを見つけやすいようにカテゴリーごとに分けてあげると使いやすいです。そのときに使用するのが、<optgroup>です。

表示サンプルです。「暖色」と「寒色」にグループ分けしてみました。上記のサンプルコードのように、分けたい選択肢を<optgroup>で囲んでlabelでグループの名前をつけて使用します。


スクリーンショット 2016-06-28 13.55.29

注意点としては、label属性で名前を指定しないと、optgroup要素で選択肢を囲んでも何も起きないので、必ず指定する必要があるということです。基本的な使い方は以上です。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新