スポンサード リンク
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は動きません