【HTML】optgroupタグ - select要素の選択肢のグループ化

HTMLのoptgroupタグについて解説します。

検証環境

HTML

macOS

14.1

optgroupタグ

optgroupタグは“select要素の選択肢をグループ化”するタグです。

基本構文

<select name="データ名">
    <optgroup label="グループ名">
        <option value="値">選択肢１</option>
        <option value="値">選択肢２</option>
        <option value="値">選択肢３</option>
    </optgroup>
    <optgroup label="グループ名">
        <option value="値">選択肢４</option>
        <option value="値">選択肢５</option>
        <option value="値">選択肢６</option>
    </optgroup>
</select>

属性

主な属性は次の通りです。

属性名	必須	内容
label	●	グループ名
disabled	-	非活性化（選択不可）

サンプル

選択肢のグループ化

sample.html

<select name="food">
    ___ih_hl_start
    <optgroup label="Fruit">
    ___ih_hl_end
        <option value="apple">リンゴ</option>
        <option value="pineapple">パイナップル</option>
        <option value="grape">ブドウ</option>
    ___ih_hl_start
    </optgroup>
    ___ih_hl_end
    ___ih_hl_start
    <optgroup label="Drink">
    ___ih_hl_end
        <option value="water">水</option>
        <option value="tea">お茶</option>
        <option value="milk">牛乳</option>
    ___ih_hl_start
    </optgroup>
    ___ih_hl_end
</select>

プレビュー

グループ化選択肢の非活性化

sample.html

<select name="food">
    ___ih_hl_start
    <optgroup label="Fruit" disabled>
    ___ih_hl_end
        <option value="apple">リンゴ</option>
        <option value="pineapple">パイナップル</option>
        <option value="grape">ブドウ</option>
    </optgroup>
    <optgroup label="Drink">
        <option value="water">水</option>
        <option value="tea">お茶</option>
        <option value="milk">牛乳</option>
    </optgroup>
</select>

プレビュー