▷ Etiqueta OPTGROUP ¡Con ejemplos!

La etiqueta HTML <optgroup> representa un grupo de elementos <option> con una etiqueta común.

La etiqueta <optgroup> ayuda a los usuarios a entender las opciones cuando eligen entre una lista grande de opciones.

Sintaxis

La etiqueta <optgroup> se escribe como <optgroup label=""></optgroup> con cualquier número de elementos <option> y/o elementos que admitan scripts.

El atributo label (no confundir con la etiqueta label) debe especificarse. Este atributo proporciona al usuario el nombre del grupo. Sin esto, el elemento <optgroup> no tendría sentido.

La etiqueta <optgroup> debe estar anidada dentro de una etiqueta <select>.

Como esto:

HTML

<select name="City">
    <optgroup label="Australia">
        <option value ="sydney">Sydney</option>
        <option value ="melbourne">Melbourne</option>
        <option value ="brisbane">Brisbane</option>
    </optgroup>
</select>

Ejemplo

Aquí, tenemos una lista de ciudades que están agrupadas por país. La etiqueta <optgroup> nos permite hacer esto agregando el nombre del país al atributo label.

HTML

<select name="City">
<optgroup label="Australia">
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="brisbane">Brisbane</option>
</optgroup>
<optgroup label="New Zealand">
<option value ="auckland">Auckland</option>
<option value ="dunedin">Dunedin</option>
<option value ="nelson">Nelson</option>
</optgroup>
<optgroup label="Thailand">
<option value ="bangkok">Bangkok</option>
<option value ="chiang-mai">Chiang Mai</option>
<option value ="pattaya">Pattaya</option>
</optgroup>
</select>

Atributos

Los atributos se pueden agregar a un elemento HTML para proporcionar más información sobre cómo debería aparecer o comportarse el elemento.

El elemento <optgroup> acepta los siguientes atributos.

Atributo Descripción

disabled Deshabilita el grupo de controles de entrada. El control del formulario no aceptará cambios del usuario. Tampoco puede recibir foco y se omitirá al presionar la tecla Tab. Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con la distinción entre mayúsculas y minúsculas ASCII con el nombre canónico del atributo, sin espacios en blanco iniciales o finales (es decir, disabled o disabled="disabled").

Valores posibles:
[Cadena vacía]
disabled

label Especifica un label para el grupo de opciones. Este atributo debe especificarse. Su valor indica el nombre del grupo.

Atributo	Descripción
`disabled`	Deshabilita el grupo de controles de entrada. El control del formulario no aceptará cambios del usuario. Tampoco puede recibir foco y se omitirá al presionar la tecla Tab. Este es un atributo booleano. Si el atributo está presente, su valor debe ser la cadena vacía o un valor que coincida con la distinción entre mayúsculas y minúsculas ASCII con el nombre canónico del atributo, sin espacios en blanco iniciales o finales (es decir, `disabled` o `disabled="disabled"`). Valores posibles: [Cadena vacía] `disabled`
`label`	Especifica un label para el grupo de opciones. Este atributo debe especificarse. Su valor indica el nombre del grupo.

Atributos globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <optgroup>, así como con todas las demás etiquetas HTML.