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.
Tabla de contenidos
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.
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.