カスタム検索

<optgroup>タグ

<optgroup>タグは、<option>タグで定義された選択項目をグループ化します。1つ以上の<option>タグをネストして使用します。多くのブラウザでは、グループ化された各項目は、インデントされて表示されます。

尚、<optgroup>タグは、グループ化するだけのもので、実際に選択したりすることはできませんし、フォームのデータとして送信される訳でもありません。

<optgroup>タグの機能と属性
機能 選択リストの項目をグループ化する
属性 HTML-4.01 コア 言語 イベント  disabled  label  
XHTML-1.0 コア 言語 イベント  disabled  label  
備考 XHTML2では廃止になっている

disabled属性

disabled属性を指定すると、グループ化された選択リストの項目を選択不可にします。

label属性

label属性を指定すると、選択リストに表示されるグループのラベル(名前)を表示させることができます。この属性を指定しない場合、何も表示されません。グループ化できるということは、何らかの名前が付くことになるでしょうから、この属性は、ほぼ必須になると思います。

optgroup.html
<html>
    <head>
        <title>&lt;optgroup&gt;の例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="get">
            <select name="list">
                <optgroup label="四国">
                    <option>香川</option>
                    <option>徳島</option>
                    <option>高知</option>
                    <option>愛媛</option>
                </optgroup>
                <optgroup label="九州" disabled="disabled">
                    <option>福岡</option>
                    <option>大分</option>
                    <option>佐賀</option>
                </optgroup>
            </select>
        </form>
    </body>
</html>
CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡