HTML optgroup
La etiqueta <optgroup> en HTML5 es utilizada para agrupar opciones relacionadas dentro de una lista desplegable (elemento <select>).
La etiqueta <optgroup> tiene un atributo obligatorio “label” el cual es usado para especificar el título o títulos del grupo. Dentro de la etiqueta <optgroup> se colocan las opciones relacionadas mediante la etiqueta <option>.
Ejemplo de uso
Por ejemplo, si se tiene una lista desplegable de frutas, se pueden crear grupos de frutas como “Cítricos” y “No cítricos” mediante el uso de la etiqueta <optgroup> y etiquetas <option> dentro de cada grupo.
<select>
<optgroup label="Cítricos">
<option value="limon">Limón</option>
<option value="naranja">Naranja</option>
<option value="pomelo">Pomelo</option>
</optgroup>
<optgroup label="No cítricos">
<option value="manzana">Manzana</option>
<option value="pera">Pera</option>
<option value="banana">Banana</option>
</optgroup>
</select>
Lenguaje del código: HTML, XML (xml)
En este ejemplo, se tiene una lista desplegable con dos grupos, “Cítricos” y “No cítricos”, con opciones dentro de cada uno.
Atributos
La etiqueta <optgroup> en HTML5 tiene los siguientes atributos:
- disabled: Este atributo deshabilita todas las opciones dentro del grupo, impidiendo que el usuario seleccione ninguna opción dentro del grupo.
- label: Este atributo especifica el título o títulos del grupo. Este es un atributo obligatorio.
Ejemplo con atributos
Aquí te dejo un ejemplo de la etiqueta <optgroup> para agrupar opciones en una lista desplegable:
<form>
<label for="select-car-make">Seleccione la marca de su automóvil:</label>
<select id="select-car-make" name="car-make">
<optgroup label="Europeas">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</optgroup>
<optgroup label="Asiáticas" disabled>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="hyundai">Hyundai</option>
</optgroup>
<optgroup label="Norteamericanas">
<option value="ford">Ford</option>
<option value="gm">General Motors</option>
<option value="dodge">Dodge</option>
</optgroup>
</select>
</form>
Lenguaje del código: HTML, XML (xml)
En este ejemplo se tiene una lista desplegable con tres grupos, “Europeas”, “Asiáticas” y “Norteamericanas”, cada uno con varias opciones de marcas de automóviles dentro.
Además, en este ejemplo el grupo “Asiáticas” está deshabilitado y no podrá ser seleccionado por el usuario.