optgroup要素

TOPページに戻る > html入門

optgroup要素

選択用のメニューの選択肢をグループ分けする
optgroup要素はフォームの部品でクリックすると選べるプルダウン式の選択肢をグループ分けします
select要素内でoption要素を囲って選択肢をグループ化します。グループ化された選択肢にlabel属性でグループ名を指定してカテゴリごとに見やすく表示することができます

使い方（書式）

<optgroup></optgroup>

optgroup要素

対応ブラウザ
要素の種類	select要素の子要素
内容となる要素	option要素

属性	説明
label属性	グループ名に表示される文字を指定します 値にはテキスト（文字）
disabled属性	グループ化した選択肢の選択を禁止して操作できなくします この属性が付いている項目はサーバーに値を送信しません
共通属性	html共通属性
イベント属性	htmlイベント属性

実際の指定方法

html

<form action="select.cgi" method="post">
<table cellpadding="5">
 <tr>
 <td>好きな飲み物は？</td>
 </tr>
 <td>
   <select name="f4" size="1">
   <optgroup label="果汁100％">
    <option value="りんごジュース">りんごジュース</option>
    <option value="みかんジュース">みかんジュース</option>
    <option value="ぶどうジュース">ぶどうジュース</option>
   </optgroup>
   <optgroup label="炭酸">
    <option value="コーラ">コーラ</option>
    <option value="サイダー">サイダー</option>
    <option value="CCレモン">CCレモン</option>
   </optgroup>
   </select>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="内容確認画面へ"> 
 <input type="reset" value="リセット"> 
 </td>
 </tr>
</table>
</form>

実際の表示

※サンプルのためフォームのみでcgiは動きません

好きな飲み物は？

りんごジュース みかんジュース ぶどうジュース コーラ サイダー CCレモン

その他のデザインはcssでスタイルを指定