Temas > Programacion > Html > Formulario select (agrupamiento de opciones) html
Julio

Formulario - select (agrupamiento de opciones)
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:
<?php // esto no va
<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>
?> // esto no va
Como podemos observar para agrupar una serie de opciones dentro de un
select debemos encerrarlas con el elemento optgroup:
<?php // esto no va
<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>
?> // esto no va
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.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
      1
2345678
9101112131415
16171819202122
23242526 272829
30      

Viernes 27 de Junio 2025
Semana 26

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar