【HTML Living Standard】optgroup要素の使い方
optgroup要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
optgroupオブジェクトは、HTMLの<select>要素内で、関連する複数の<option>要素を意味的にグループ化するために使用されるオブジェクトです。この機能により、ユーザーがドロップダウンリストから選択肢を選ぶ際に、視覚的に整理された状態を提供し、特に選択肢が多い場合に目的の項目を素早く見つけられるよう支援します。結果として、ユーザーインターフェースの操作性が向上し、より良いユーザーエクスペリエンスが提供されます。
<optgroup>は、必ず<select>要素の直接の子要素として配置され、その内部にグループに属する<option>要素を記述します。各<optgroup>オブジェクトには、必須のlabel属性を指定する必要があります。このlabel属性に設定された値が、ウェブブラウザ上でそのグループの見出しとして表示されます。例えば、「フルーツ」「野菜」といった明確なカテゴリ名を設定することで、ユーザーはどの選択肢がどの分類に属するかを直感的に理解できます。
また、オプションとしてdisabled属性を指定することも可能です。この属性が<optgroup>に設定された場合、そのグループ内に含まれるすべての<option>要素が選択不可能となり、ユーザーはそれらの選択肢を選ぶことができなくなります。これは、特定の条件に基づいて一部の選択肢グループの利用を制限したい場合に有効です。なお、<optgroup>要素はネスト（入れ子）にすることはできませんのでご注意ください。
公式リファレンス: <optgroup>: The Option Group element
構文(syntax)
1<select> 2 <optgroup label="グループのラベル"> 3 <option value="オプション値1">オプション表示テキスト1</option> 4 <option value="オプション値2">オプション表示テキスト2</option> 5 </optgroup> 6 <optgroup label="別のグループのラベル"> 7 <option value="オプション値3">オプション表示テキスト3</option> 8 </optgroup> 9</select>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません