Hemos visto que podemos crear cuadros de selección individual o de selección múltiple. Ahora veamos que podemos agrupar las opciones que tiene el cuadro de selección, esto tiene sentido si el cuadro de selección tiene muchos items.
Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option.
Veamos un ejemplo de agrupar una serie de opciones, agruparemos una serie de frutas y verduras:
<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
<meta charset="UTF-8">
</head>
<body>
<form action="registrardatos.php" method="post">
Seleccione una fruta o verdura:
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3&guot;Sandia</option>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
El resultado en el navegador es:
Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup:
<optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup>
La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un título.
La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select.
Se puede hacer agrupamiento de opciones y permitir selecciones múltiples.