<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>
表示確認
<optgroup>に関連するHTMLタグ
入力・送信フォームに関連する要素 | |
---|---|
<form> | フォームを作成する |
<fieldset> | フォームの入力項目をグループ化する |
<legend> | 入力項目のグループにキャプションを与える |
<input> | フォームを構成する部品を作成する |
<label> | 入力項目にキャプションを与えて関連付ける |
<textarea> | 複数行に渡るテキスト編集項目を作成する |
<button> | ボタンを設置する |
<select> | セレクトボックスを作成する |
<option> | セレクトボックスの選択肢を作成する |
<optgroup> | セレクトボックスの選択肢をグループ化する |
<datalist> | フォームの入力欄に入力候補となる選択肢を提供する |