<optgroup> セレクトボックスの選択肢をグループ化する
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | <select> |
子にできる要素 | <option> |
対応ブラウザ | caniuseで確認 |
<optgroup>タグの説明
<optgroup>
は、送信フォームのセレクト項目に指定された選択肢をグループ化する際に使用します。具体的には、<select>
に内包された<option>
をまとめる役目を果たします。
セレクト項目をグループ化すると、ユーザーが選択肢を選ぶ祭にグループごとに区分けされたリストとして表示されます。これは選択肢の数が多い場合に目安となります。
<optgroup>タグの特徴
- レイアウトには影響を与えません。セレクト項目の一覧表に階層を与えます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<optgroup>に指定できる主な属性
- label
- グループ化した項目を代表するような名前を指定します。必須属性です。
- disabled
- グループにまとめられた選択項目を一括で無効にします。これは論理属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<optgroup>の使い方とサンプル
セレクト項目をグループ化して階層を与えた例です。実際にサンプルを動かして見栄えを確認してみましょう。
HTML
<form action="#####" method="post">
機材を選んで下さい。<br>
<select name="studio">
<optgroup label="ギターアンプ">
<option value="marshall" label="マーシャル">マーシャル</option>
<option value="mesa" label="メサブギー">メサブギー</option>
<option value="fender" label="フェンダー">フェンダー</option>
<option value="roland" label="ローランド">ローランド</option>
</optgroup>
<optgroup label="ベースアンプ">
<option value="ampeg" label="アンペグ">アンペグ</option>
<option value="gibson" label="ギブソン">ギブソン</option>
<option value="hartke" label="ハートキー">ハートキー</option>
<option value="peavey" label="ピーヴィー">ピーヴィー</option>
</optgroup>
</select><br>
<input type="submit" value="決定">
</form>
表示確認