<optgroup>El elemento <optgroup> en HTML5 se utiliza para agrupar un conjunto de elementos <option> dentro de una lista desplegable (<select>), permitiendo así organizar opciones relacionadas bajo una misma etiqueta. Esta característica es particularmente útil cuando quieres mejorar la usabilidad y la accesibilidad de formularios con listas desplegables largas.
<optgroup>label:
<optgroup label="Frutas">disabled:
"disabled": El grupo de opciones está deshabilitado.<optgroup label="Frutas" disabled><optgroup> en HTML5El uso del <optgroup> es sencillo y se aplica dentro del elemento <select>. A continuación, se presentan algunos ejemplos básicos para ilustrar su uso.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de optgroup</title>
</head>
<body>
<form>
<label for="frutas">Selecciona una fruta:</label>
<select id="frutas" name="frutas">
<optgroup label="Frutas tropicales">
<option value="mango">Mango</option>
<option value="piña">Piña</option>
<option value="papaya">Papaya</option>
</optgroup>
<optgroup label="Frutas cítricas">
<option value="naranja">Naranja</option>
<option value="limon">Limón</option>
<option value="toronja">Toronja</option>
</optgroup>
</select>
</form>
</body>
</html>En este ejemplo, se crean dos grupos de opciones bajo el elemento <select>: "Frutas tropicales" y "Frutas cítricas". Cada grupo contiene sus respectivas opciones <option>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de optgroup deshabilitado</title>
</head>
<body>
<form>
<label for="vehiculos">Selecciona un tipo de vehículo:</label>
<select id="vehiculos" name="vehiculos">
<optgroup label="Vehículos de motor">
<option value="coche">Coche</option>
<option value="moto">Moto</option>
<option value="camion">Camión</option>
</optgroup>
<optgroup label="Vehículos sin motor" disabled>
<option value="bicicleta">Bicicleta</option>
<option value="patin">Patín</option>
</optgroup>
</select>
</form>
</body>
</html>En este ejemplo, el grupo de "Vehículos sin motor" está deshabilitado gracias al atributo disabled. Por lo tanto, las opciones dentro de este grupo no pueden ser seleccionadas por el usuario.
label en <optgroup> para proporcionar descripciones claras y concisas de cada grupo.disabled de manera prudente, y asegúrate de que la razón para deshabilitar un grupo sea clara para los usuarios.Estos atributos y consideraciones mejoran la organización y la usabilidad de formularios complejos, haciendo que la selección de opciones sea más intuitiva para todos los usuarios.