Etiqueta HTML <optgroup>
La etiqueta HTML <optgroup> agrupa las etiquetas <option>. El atributo obligatorio <label> define el encabezado del grupo, que aparece en negrita, mientras que las opciones internas se indentan automáticamente. (La etiqueta <option> define los elementos en una lista desplegable creada por la etiqueta <select>.)
La etiqueta <optgroup> se considera un elemento de formulario.
Sintaxis
La etiqueta <optgroup> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<optgroup>) y cierre (</optgroup>).
Ejemplo de la etiqueta HTML <optgroup>:
Ejemplo de una lista desplegable
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Resultado
El navegador mostrará una lista desplegable con dos grupos:
- Libros: HTML, CSS
- Fragmentos: Java, Linux, Git
Ejemplo de la etiqueta HTML <optgroup> con el atributo disabled:
Ejemplo de la etiqueta HTML <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled="disabled" label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Resultado
El navegador mostrará una lista desplegable con dos grupos:
- Cuestionarios (deshabilitado): HTML, CSS, JavaScript, PHP
- Fragmentos: Git, AngularJS
Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| disabled | disabled | Indica que la selección de los elementos del grupo está deshabilitada. |
| label | text | Define una etiqueta para el grupo, que se mostrará como un encabezado en la lista desplegable. Atributo obligatorio. |
La etiqueta <optgroup> admite los Atributos globales y los Atributos de eventos.
Cómo dar estilo a una etiqueta HTML <optgroup>
Puedes usar CSS para cambiar la apariencia del encabezado del grupo y sus opciones:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}Práctica
¿Cuál es la función de la etiqueta HTML 'optgroup'?