Elemento optgroup

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento optgroup representa un grupo de opciones (option) temáticamente definido, que forma parte de un control select. Las opciones agrupadas pueden ser etiquetadas mediante el atributo label, que usarán los navegadores para mostrar como nombre del grupo.

La agrupación de opciones en un control select puede mejorar la legibilidad y la facilidad de uso. Los autores deberían usar este elemento siempre que sea posible.

El atributo label es obligatorio en este elemento y debería proveer a los usuarios una pista o descripción acerca de los contenidos del grupo.

Ejemplos

En este ejemplo creremos un control select con algunos elementos option divididos en dos grupos. Aquí tendrás oportunidad de ver la representación de los grupos y su modo de interacción. También podrás notar la presencia del atributo requerido label y cómo tu navegador lo utiliza para identificar al grupo.

<p>
  Elije un auto:
  <select>
    <optgroup label="Ferrari">
      <option>458 Spider</option>
      <option>F12 Berlinetta</option>
      <option>California T</option>
    </optgroup>
    <optgroup label="Porsche">
      <option>Macan</option>
      <option>918 Spyder</option>
    </optgroup>
  </select>
</p>

Elije un auto:

Ahora, usaremos el atributo disabled para deshabilitar a un grupo entero de opciones de una sola vez. Esto impedirá al usuario la interacción con todas las opciones en el grupo deshabilitado.

<p>
  Elije una estatuilla:
  <select>
    <optgroup label="África">
      <option>Elefante</option>
      <option>Jirafa</option>
      <option>Cebra</option>
      <option>León</option>
    </optgroup>
    <optgroup label="Oceanía" disabled>
      <option>Demonio de Tasmania</option>
      <option>Koala</option>
      <option>Canguro</option>
    </optgroup>
  </select>
</p>

Elije una estatuilla:

Atributos

Atributos específicos

disabled

Un valor booleano que indica si el grupo y todas sus opciones se encuentran deshabilitados o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el grupo de opciones estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<p>
  Selecciona un producto:
  <select>
    <optgroup label="Frutas" disabled>
      <option>Manzana</option>
      <option>Naranja</option>
    </optgroup>
    <optgroup label="Vegetales">
      <option>Cebolla</option>
      <option>Zanahoria</option>
    </optgroup>
  </select>
</p>

Selecciona un producto:

label

Una línea de texto pensada para proveer una etiqueta, nombre o identificación al grupo de opciones. Esta etiqueta será apropiadamente mostrada por el navegador para mejorar la legibilidad en el control.

Este atributo es obligatorio en este elemento y debería proveer a los usuarios una pista o descripción acerca de los contenidos del grupo.

Ejemplo

<p>
  Selecciona un plato:
  <select>
    <optgroup label="Chino">
      <option>Cerdo agridulce</option>
      <option>Camarones con miel y nueces</option>
    </optgroup>
    <optgroup label="Mejicano">
      <option>Enchiladas a cocción lenta</option>
      <option>Ensalada de taco</option>
    </optgroup>
  </select>
</p>

Selecciona un plato:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.