Curso de HTML - Formulario - Select (agrupamiento de opciones)
¿ Qué es HTML? Estructura interna Salto de línea Párrafo Títulos Enfasis Hipervínculo a otra página Hipervínculo a otro sitio WEB Imágenes en una página Hipervínculo en una imagen Apertura de un hipervínculo en otra instancia del navegador Enlace a un correo Anclas en la misma página Anclas en la otra página Lista ordenada Lista no ordenada Lista de definiciones Listas anidadas Tablas Tabla con encabezado Tabla con título Combinación de celdas Titulo de la pagina Contenido de la cabecera Comentarios en una página Caracteres especiales Formulario form Formulario input Formulario texarea Formulario checkbox Formulario radio Formulario Select 1 Formulario Select 2 Formulario Select 3 Formulario Button Formulario Button 2 Formulario type= Formulario - input type= Formulario - agrupamiento de controles Formulario - controles con valores iniciales Formulario - orden de foco de controles Formulario - Inhabilitar controles Formulario - Text/password y maxlength Formulario - text/password/textarea y readonly Formulario - Envío de datos mediante mail Formulario - label Frames Actualización de un frame Frames - Medidas Frames - propiedades Frames - Anidamiento iframes Declaración DOCTYPE HTML Transitional DOCTYPE. HTML Estricto DOCTYPE. para Frames Validación de enlaces Conceptos hojas de estilo Texto en CSS Elementos div y span Fuentes con CSS Elementos obsoletos de html

Formulario - select (agrupamiento de opciones)

La etiqueta optgroup se utiliza para agrupar opciones relacionadas en un elemento select (lista desplegable). Si tiene una lista larga de opciones, los grupos de opciones relacionadas son más fáciles de manejar para un usuario.

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:

<html>
<head>
<title>Prueba de formulario</title>
</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">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>

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>
<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>

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.

Ver ejemplo