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

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op8] [Op9] [Ns6] [Ns7]

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

与えられる属性

label="値"
グループ化したい内容で項目を指定します。

<optgroup>の使用例

ソース

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

表示すると

スタジオ機材

入力フォーム 関連項目

<form> フォームを作成する 
<input> フォームを構成する部品を作成する 
<textarea> 複数行のテキストエリアを作成 
<select> セレクトボックスを作成する 
<option> セレクトボックスの選択肢を作成する 
<optgroup> セレクトボックスの選択肢をグループ化 
<fieldset> フォームの入力項目をグループ化する 
<legend> 入力項目グループにタイトルを付ける 
<label> フォームの入力項目と項目名を関連付ける 

戻る

TOP