optgroup要素

TOPページに戻る > html入門

スポンサード リンク

optgroup要素

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

使い方(書式)

<optgroup></optgroup>

optgroup要素

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
要素の種類 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は動きません
好きな飲み物は?

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





(C)2012 ホームページ作成無料