★HTML5タグリファレンス
<optgroup> …… 選択肢をグループ化する
広告
このページでは、HTML5のoptgroup要素を解説しています。
optgroup要素の最新情報は、以下を参照してください。
<optgroup>タグは、<option>タグで作成する選択肢をグループ化する際に使用します。 <optgroup>～</optgroup>の中に<option>を配置することで、 選択肢をグループ化することができます。
label属性は、選択肢グループにラベル（項目名）を付ける属性で、必ず指定する必要があります。 label属性は必須属性なので、<optgroup>で指定する選択肢グループは必ずグループ名を持つことになります。
disabled属性は、<option>タグで作成する選択肢をグループごと無効にする場合に使用します。 選択肢を個別に無効にする場合には、<optgroup>ではなく<option>にdisabled属性を指定します。
■HTML4.01からHTML5へのバージョンアップによる変更点
optgroup要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。
■属性
- disabled属性
- 操作を無効にする（disabled）
- label属性（必須属性）
- 選択肢グループにラベル（項目名）を付ける
■使用例
HTMLソース
<form action="xxxxxx.php" method="post"><p>
ご希望の旅行コースを選択してください。（※現在、宿泊コースはすべて満室となっています。）
</p>
<p>
<label>旅行企画名:
<select name="course">
<option selected>▼旅行コースを選択してください</option>
<optgroup label="ご宿泊" disabled>
<option value="stay01">【一泊二日】和食・温泉コース</option>
<option value="stay02">【一泊二日】洋食・温泉コース</option>
<option value="stay03">【一泊二日】食べ放題・温泉コース</option>
</optgroup>
<optgroup label="お食事とご入浴">
<option value="lunch01">【日帰り】和食・温泉コース</option>
<option value="lunch02">【日帰り】洋食・温泉コース</option>
<option value="lunch03">【日帰り】食べ放題・温泉コース</option>
</optgroup>
<optgroup label="ご入浴のみ">
<option value="spa01">【日帰り】温泉Ａコース</option>
<option value="spa02">【日帰り】温泉Ｂコース</option>
<option value="spa03">【日帰り】名湯めぐりコース</option>
</optgroup>
</select>
</label>
</p>
<p>
<input type=submit value="確認画面へ進む">
</p>
</form>
↓↓↓
ブラウザ上の表示
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ