Codificación aprenderaprogramar.com: CU00723B
OPCIONES PARA PEDIR DATOS EN FORMULARIOS HTML
Podemos permitir que los usuarios elijan opciones preestablecidas de una lista en un formulario HTML. Esto podemos lograrlo usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones: casillas de verificación, botones radio y listas de opciones.
Casillas de verificación
Una casilla de verificación es un pequeño cuadrado asociado a una opción que puede ser marcado o desmarcado por el usuario.
Una casilla puede encontrarse en dos situaciones: "marcada" ó "no marcada" ("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es tratada individualmente.
Este control es insertado mediante la etiqueta HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que se especifique lo contrario usando el atributo booleano (verdadero o false) "checked". Para hacer que una casilla aparezca inicialmente como casilla marcada escribiremos como atributo de la etiqueta input: checked="checked". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/action.php"> Selecciona tus intereses: <br /> <input name="cbipeliculas" type="checkbox" />Películas <br /> <input name="cbilibros" type="checkbox" />Libros <br /> <input name="cbiinternet" type="checkbox" />Internet </form> </body> </html> |
En este caso ninguna casilla aparecerá marcada como seleccionada inicialmente.
Si lo deseamos podemos marcar una opción por defecto con el atributo checked para que aparezca marcada cuando se cargue la página web. Cambia el código como indicamos a continuación y comprueba los resultados:
<input name="cbilibros" type="checkbox" checked="checked" />Libros
A modo de ejercicio, añade un botón para enviar el formulario y comprueba que el resultado después de realizar el envío del formulario con las dos primeras casillas seleccionadas es el siguiente: http://aprenderaprogramar.com/action.php?cbipeliculas=on&cbilibros=on
Como puedes comprobar, cuando una casilla es seleccionada la información que se envía a la dirección de destino es nombreCasilla=on donde nombreCasilla es el valor que tiene el atributo name en el código HTML del formulario. Si una casilla no es seleccionada no se envía ninguna información.
Botones radio
Los botones radio trabajan de forma similar a las casillas de verificación con una pequeña diferencia: los botones radio que comparten el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar más de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente deseleccionadas.
El valor inicial para el grupo depende del navegador (la mayoría muestra todos los controles sin marcar). Esto puede ser cambiado usando el atributo booleano "checked" de forma similar a como hemos visto para las casillas de verificación. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/action.php"> Selecciona tu actividad favorita: <br /> <input name="intereses" type="radio" value="rbipeliculas" />Películas <br /> <input name="intereses" type="radio" value="rbilibros" />Libros <br /> <input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet </form> </body> </html> |
A modo de ejercicio, añade un botón de envío y envía el formulario. Comprueba que en la url después de enviar el formulario obtienes lo siguiente: http://aprenderaprogramar.com/action.php?intereses=rbiinternet
Para botones radio la información pasada a la dirección web de destino del formulario es nameOpcionElegida = valueOpcionElegida. En una lista con muchos botones radio sólo se pasará información sobre uno de ellos: la opción seleccionada. Si no hay ninguna opción seleccionada no se pasará ninguna información relacionada. Por ejemplo en el caso anterior si envías el formulario sin ninguna opción seleccionada la url de destino es http://aprenderaprogramar.com/action.php
Listas de opciones
Estas listas pueden ser construidas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML option (opción simple) y el elemento HTML optgroup (grupo de opciones). Este elemento es el único prescindible (opcional) para construir este tipo de listas.
Veamos primero el aspecto gráfico y después la explicación y el código.
Los controles de lista pueden ser usadas para recolectar información al igual que los botones radio (sólo una opción) o como casillas de verificación (múltiples opciones), dependiendo de la presencia del atributo booleano "multiple".
Se puede especificar que se permite la selección múltiple de dos maneras:
- Escribiendo <select multiple name=" … " >
- Escribiendo <select multiple="multiple" name=" … " >
Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - aprenderaprogramar.com</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/action.php"> Elije solo una opción, como en los botones radio: <select name="entradalista1"> <optgroup label="Entradas textuales"> <option>Entrada de línea</option> <option selected="selected">Entrada de contraseña</option> <option>Entrada multi-línea</option> </optgroup> <optgroup label="Opciones"> <option>Casillas de verificación</option> <option>Botones radio</option> <option>Listas</option> </optgroup> </select> <br /> Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br /><br /><br /> <select name="entradalista2[]" multiple="multiple"> <optgroup label="Entradas textuales"> <option>Entrada de línea</option> <option>Entrada de contraseña</option> <option>Entrada multi-línea</option> </optgroup> <optgroup label="Opciones"> <option selected="selected">Casillas de verificación</option> <option>Botones radio</option> <option>Listas</option> </optgroup> </select> </form> </body> </html> |
En el caso de que enviásemos el formulario teniendo elegido en el primer select la opción “Entradas de contraseña” y en el segundo las opciones “Casillas de verificación”, “Botones radio” y “Listas”, la url de destino quedaría de la siguiente manera (pueden haber variaciones entre un navegador y otro a la hora de codificar caracteres extraños como letras con tildes, eñes o corchetes):
Para la primera lista sin el atributo "multiple", el valor pasado a la url de destino será la opción seleccionada, pero para el segundo ejemplo el valor pasado indica los distintos valores seleccionados uno después de otro. Por ejemplo fruta=Fresa&fruta=Pera&fruta=Manzana.
Aquí nos encontramos con un problema: ¿cómo saber que se han seleccionado tres opciones de fruta en la dirección web de destino? Este problema ahora no nos resulta relevante porque no vamos a estudiar cómo se recupera la información en este curso, lo único que señalaremos es que para que posteriormente se pueda recuperar la información con facilidad cuando se permite una selección múltiple y el nombre es común, es recomendable añadir unos corchetes después del nombre (atributo name del select). Estos corchetes permitirán que en la dirección web de destino se pueda recuperar la información interpretando que fruta[]=Fresa&fruta[]=Pera&fruta[]=Manzana quiere decir fruta[1]=Fresa&fruta[2]=Pera&fruta[3]=Manzana, es decir, que cada opción elegida lleve un índice para poder diferenciarlas (esta forma de trabajar se denomina hacer uso de arrays o arreglos y el índice inicial normalmente es el cero). En resumen, para listas con el atributo "multiple" presente, debes agregar los corchetes ("[]") al final del nombre de la etiqueta HTML select.
La información que se envía a la url de destino es:
a) Casos en los que el atributo "value" no está presente, por ejemplo <option>Fresa del bosque</option>: se envía el texto que figura entre las etiquetas option.
b) Casos en los que el atributo "value" está presente, por ejemplo <option value="fresa">Fresa del bosque</option>: se envía el contenido del atributo value.
Suponiendo que el atributo name es fruta, en el caso a) en la url de destino aparecería &fruta=Fresa+del+bosque y en el caso b) aparecería &fruta=fresa
EJERCICIO
Crea una página web que contenga un formulario que cumpla estas condiciones. Como título principal de la página debe figurar con etiquetas h1 el texto “Preferencias musicales”. Debe contener tres checkbox que permitan elegir tipos de música favoritas entre Rock, Pop y Jazz. Seguidamente mediante radio buttons se debe pedir la edad ofreciendo estas opciones: de 12 a 17 años, de 18 a 35 años, de 36 a 65 años y más de 65. Finalmente, se deben poder elegir “grupos y cantantes que te gustan” permitiéndose la selección múltiple y ofreciendo un optgroup denominado Rock con tres nombres de grupos o cantantes, otro optgroup denominado Pop con tres nombres de grupos o cantantes y otro optgroup denominado Jazz con tres nombres de grupos o cantantes.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
