ウェブランサー

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

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
タイプ -
取り扱い 標準

<optgroup>タグは、<option>~</option>をグループ化する際に使用します。
まず<optgroup>のlabel属性で大きな項目を作り、次に<option>のlabel属性で細かい項目に分けていきます。

<optgroup>タグに指定できる属性

label="値"
グループ化したい内容で項目を指定します。
style="プロパティ:値;"
スタイルを指定します。
id="", class=""
idやclass付けが出来ます。

<optgroup>の使用サンプル

HTML
<form action="http://#####.com/form.php" method="post">
スタジオ機材
<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>
表示確認
スタジオ機材

<optgroup>に関連するHTMLタグ

入力フォームに関連する要素
<command> ページ内のメニューに操作コマンドを設定する
<datalist> フォームの入力欄に入力候補となる選択肢を提供する
<fieldset> フォームの入力項目をグループ化する
<form> フォームを作成する
<input> フォームを構成する部品を作成する
<label> フォームの入力項目と項目名を関連付ける
<legend> 入力項目グループにタイトルを付ける
<meter> 規定範囲内の数量や測定値を表す
<optgroup> セレクトボックスの選択肢をグループ化する
<option> セレクトボックスの選択肢を作成する
<output> 計算結果やユーザーアクションの出力欄を作成する
<progress> 作業の進捗状況を示すプログレスバーを表示する
<select> セレクトボックスを作成する
<textarea> 複数行のテキストエリアを作成する