【HTML】optgroupタグ - 選択項目のグループ化
HTMLのoptgroupタグをご紹介します。
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 | - | 非活性化（選択不可） |
サンプルコード
選択肢のグループ化
<select name="food">
<optgroup label="Fruit">
<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>グループ化選択肢の非活性化
<select name="food">
<optgroup label="Fruit" disabled>
<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>
