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

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

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

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

<select name="color">
  <option value="">色を選択してください</option>
  <option value="1">赤</option>
  <option value="2">青</option>
  <option value="3">黄</option> 
</select>

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

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

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

<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でグループの名前をつけて使用します。


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

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


イベント

2017/12/05(火)
Design Thinking Square