Etiqueta optgroup HTML5: Agrupar las opciones de una etiqueta select

Nuevo post para repasar la etiqueta optgroup HTML5, sirve para agrupar las diferentes opciones (option) que hay en una etiqueta select.

En el pantallazo inferior podéis apreciar que al clickar en el select la agrupación ayuda a diferenciar los diferentes tipos de datos.

Sintaxis de la etiqueta optgroup HTML5

Vamos a ver la sintaxis de esta nueva etiqueta HTML5 extraída de su web oficial:

<select>
 <optgroup label="Grupo 1">
     <option value="valor1">Valor1</option>
 </optgroup>
 <optgroup label="Grupo 2">
     <option value="valor2">valor2</option>
 </optgroup>
</select>

Os explico el código:

• La etiqueta optgroup (con su apertura y cierre) se debe colocar entre los option.
• Después mediante el atributo label ponemos un texto descriptivo de la agrupación.

Ejemplo de la etiqueta optgroup HTML5

Vamos realizar este ejemplo de optgroup para ver en funcionamiento la etiqueta HTML5:

<select>
 <optgroup label="Colores primarios">
  <option value="Azul">Azul</option>
  <option value="Rojo">Rojo</option>
  <option value="Rojo">Amarillo</option>
 </optgroup>
 <optgroup label="Otros colores">
  <option value="Verde">Verde</option>
  <option value="Naranja">Naranja</option>
  <option value="Blanco">Blanco</option>
 </optgroup>
</select>

Tal y como se puede apreciar en el código los optgroup están agrupando las diferentes opciones de colores.