<optgroup> セレクトボックスの選択肢をグループ化する

<optgroup>タグの説明

<optgroup>は、送信フォームのセレクト項目に指定された選択肢をグループ化する際に使用します。具体的には、<select>に内包された<option>をまとめる役目を果たします。

セレクト項目をグループ化すると、ユーザーが選択肢を選ぶ祭にグループごとに区分けされたリストとして表示されます。これは選択肢の数が多い場合に目安となります。

<optgroup>タグの特徴

• レイアウトには影響を与えません。セレクト項目の一覧表に階層を与えます。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<optgroup>に指定できる主な属性

label

グループ化した項目を代表するような名前を指定します。必須属性です。

disabled

グループにまとめられた選択項目を一括で無効にします。これは論理属性です。

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<optgroup>の使い方とサンプル

セレクト項目をグループ化して階層を与えた例です。実際にサンプルを動かして見栄えを確認してみましょう。

<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>