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:
<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.
<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 disabledDeshabilita 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]disabledlabelEspecifica 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.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
Para una explicación completa de estos atributos, consulta los atributos globales de HTML 5.
