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.