Formularios HTML. form, label. name, value, id. Ejemplos. Checkbox, option button, combobox FORMULARIOS EN HTML En HTML, un formulario es una sección del documento destinada a que el usuario introduzca datos que van a ser enviados a algún lado. En HTML un formulario puede contener cosas muy variadas: texto normal, elementos especiales llamados controles (checkboxs, radiobuttons, comboboxs, etc.), y otros elementos especiales denominados etiquetas (labels). Explicaremos el significado de estos elementos especiales y cómo generar formularios en HTML. Los usuarios normalmente "completan" un formulario modificando sus controles, ya sea introduciendo texto, seleccionando una opción entre varias, etc., antes de enviar el formulario y que éste sea procesado. Escribe el siguiente código en un editor y guárdalo como ejemplo.html para que puedas visualizarlo en tu navegador. No te preocupes ahora si no entiendes algunos de los elementos que aparecen, porque los iremos explicando poco a poco.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 1 </title> </head> <body> <form action="http://www.diace.edu.pe" method="get"> <p> <label for="nombre">Nombre: </label> <input type="text" name="nombre" id="nombre"> <br/> <br/> <label for="apellido">Apellido: </label> <input type="text" name="apellido" id="apellido"> <br/> <br/> <label for="email">Email: </label> <input type="text" name="email" id="email">
<br/> <br/> <input type="radio" name="sexo" id="varon" value ="Varón"> <label for="varon">Varón: </label> <br/> <br/> <input type="radio" name="sexo" id="mujer" value ="Mujer"> <label for="mujer">Mujer: </label> <br/> <br/> <input type="submit" value="Enviar"> <input type="reset"> </p> </form> </body> </html> La visualización que debes obtener es algo parecido a la siguiente imagen.
Supón que hemos rellenado los datos de este formulario. Cuando pulsamos en “Enviar”, la información se envía al servidor y se utiliza para algo. ¿Qué utilidad se le puede dar a esta información? En general, un formulario html nos sirve para acceder a otra URL(dirección web) que recibe la información. Cuando la nueva URL recibe la información pueden ocurrir varias cosas: que se muestre en pantalla, que se escriba en una base de datos, que nos muestre una imagen
distinta según la información que hayamos enviado… Algunas de las cosas que hemos citado no se pueden hacer usando HTML. Por ejemplo, no podemos escribir en una base de datos usando HTML. Sin embargo, sí podemos recoger la información en un formulario o página web HTML y luego acceder a una dirección web de tipo php, asp, jsp… que son tipos de páginas web que permiten realizar otro tipo de funciones más avanzadas relacionadas con la programación, como es la escritura en bases de datos para almacenar la información. CONTROLES Los usuarios interaccionan con los formularios a través de los llamados controles. Un control vamos a definirlo, de forma simplificada, como un objeto que aparece en la pantalla y que es modificable por el usuario. Ejemplos de controles serían los que vamos a mostrar a continuación.
Checkbox o casilla de verificación: control que puede ser marcado o desmarcado por el usuario. Es muy típico cuando se requiere aceptar unas condiciones para realizar una compra en una página web, o cuando se requiere aceptar la licencia para instalar un programa.
Option Button o botón circular seleccionable (“radio”): control que puede ser marcado o desmarcado por el usuario, de forma que normalmente cuando se marca una opción se desmarca la que estuviera seleccionada previamente. Es muy típico cuando se requiere elegir entre varias opciones.
ComboBox o lista desplegable: control que muestra una opci贸n seleccionada de entre varias posibles, y que al pulsar sobre 茅l despliega una lista de opciones.
Atributos básicos de un control: 1.- name: identifica un control dentro de un formulario. Este atributo nos va a resultar necesario para poder rescatar la información. 2.- value: cada control tiene un valor inicial y un valor actual. Normalmente, el valor inicial de un control puede especificarse con el atributo value. El valor actual del control se hace en primer lugar igual al valor inicial. A partir de ese momento, el valor actual del control puede ser modificado mediante la acción del usuario. El valor inicial de un control no cambia. Así, cuando se carga el formulario, el valor actual de cada control se restablece a su valor inicial. Si el control no tiene un valor inicial, el efecto de una reinicialización o carga del formulario sobre ese control es indefinido. Indefinido significa que no sabemos exactamente lo que va a pasar. Para que no ocurra esto, es preferible establecer siempre un valor inicial. 3.- id: el valor de este atributo permite relacionar un control con una etiqueta. Por ejemplo, si un control tiene por id el valor id=”email”, esto significa que ese control está relacionado con la etiqueta (label) cuyo atributo for es for=”email”.
Normalmente, cuando se envía un formulario para su procesamiento, para cada control se procede al envío de dos datos: su nombre (atributo name) y su valor actual, y esta información se envía a la dirección web de destino. Ejemplo: si introducimos en el formulario que nuestro nombre es Juan, nuestros apellidos Suárez Guerra, nuestro emailjuan@gmail.com y nuestro sexo Varón, la información que se envía a la siguiente dirección web donde se reciben los datos es: · nombre=Juan · apellido=Suárez Guerra · email= juan@gmail.com · sexo=Varón
Introduce esta información y envía el formulario cuyo código vimos anteriormente. Fíjate en la URL que aparecerá en tu navegador. Será algo así: http://www.aprenderaprogramar.com/?nombre=Juan&apellido=Su%E1rez+Gue rra&email=juan%40gmail.com&sexo=Var%F3n Lo que puedes comprobar aquí es que la información que hemos escrito en el formulario está apareciendo ahora de alguna manera en la nueva dirección web. No se muestra exactamente igual porque las direcciones web no admiten tildes, que son sustituidas por un código equivalente a la letra con tilde. Tampoco las direcciones web admiten el símbolo @, que también es sustituido.
Label o etiqueta: podría considerarse que no es un control en sentido estricto, puesto que es algo que no es modificable por el usuario. Un label o etiqueta es un texto que va asociado a un control con el que puede interactuar un usuario. Un label contiene habitualmente dos informaciones importantes: el nombre del control con el que va asociado, y el texto a mostrar. Por ejemplo el código: <label for="nombre">Introduzca su nombre: </label> Nos indica que el label tiene el atributo for establecido como igual a nombre. Eso significa que el label va asociado a un control dentro del formulario cuyo atributo será nombre. Por otro lado, el texto que mostrará este label será “Introduzca su nombre:”. En realidad un label puede considerarse una parte “poco importante” en un formulario, puesto que se limita a mostrar un texto y esto también se puede hacer de otras maneras. De hecho, podríamos prescindir de su uso. En vez de tener el texto entre etiquetas <label> y </label> podríamos tenerlo entre etiquetas <p> y </p>. ¿Por qué usar entonces los label? Porque las páginas web conviene que estén bien estructuradas y que todos los programadores se atengan a las mismas normas. En este caso, las normas estándares para construcción de formularios nos dicen que los textos asociados a los controles los pongamos dentro de etiquetas label, y que indiquemos el control al que va asociada la etiqueta mediante el atributo for. También nos servirá para poder aplicar estilos específicos a los textos de formularios mediante técnicas CSS. Finalmente, tener en cuenta que a medida que vayamos haciendo páginas más complejas, no haber hecho las cosas bien puede acarrearnos problemas.
LA ETIQUETA FORM. POSIBILIDAD DE TENER VARIOS FORMULARIOS EN UNA WEB. Cuando creamos un formulario en HTML, todo el contenido que lleva lo incluimos entre las etiquetas de apertura <form> y de cierre </form>. Estas dos etiquetas delimitan el formulario. Dentro de una página web puede haber varios formularios, por ejemplo podríamos tener dos formularios en una página web para que los usuarios de un tipo rellenen un formulario y los de otro tipo otro formulario: - “Si eres mayor de 18 años rellena este formulario” … … … - “Si eres menor de 18 años rellena este formulario” … … …
En muchísimas páginas web hay un formulario único. Por ejemplo “Rellena tus datos personales”. Pero debemos saber que podríamos tener dos, tres o más formularios. La forma de delimitar cada uno de ellos es como hemos dicho: usando las etiquetas de apertura y cierre <form> y </form>. La etiqueta form suele incluir dos atributos. El atributo action indica la dirección web (URL) a la que se dirigirá la navegación cuando se pulse en el botón de envío del formulario. El atributo method hace referencia a cómo se enviará la información. Hay diversas cuestiones relacionadas con los formularios que todavía no hemos explicado. Lo iremos haciendo poco a poco.
EJERCICIO 1 Basándote en el código de ejemplo que hemos visto, crea una página web que cumpla con lo que indicamos a continuación: a) Como título principal de la página debe figurar con etiquetas h1 el texto “Inscripción al Congreso de Medicina Santiago 2048” b) Debe contener dos formularios: el primero será “Inscripción al Congreso para médicos especialistas” y el segundo “Inscripción al congreso para médicos generalistas”. Estos títulos deben figurar antes del formulario con etiquetas h2. c) El formulario para médicos especialistas debe solicitar nombre, apellidos, especialidad y año de obtención de la especialidad. d) El formulario para médicos generalistas debe solicitar nombre, apellidos, centro médico donde ejerce y año de obtención del título.
Nota: para evitar confusiones en el envío de datos, todos los campos name deben tener valores diferentes, es decir, en ambos formularios no se pueden repetir nombres los nombres identificativos empleados.
Method. Formas de envío de datos en formulario. Diferencias y ventajas. Ejemplos FORMAS DE ENVÍO DE LOS DATOS DE UN FORMULARIO. MÉTODOS GET Y POST. EJEMPLOS Cuando un usuario rellena un formulario en una página web los datos hay que enviarlos de alguna manera. Vamos a considerar las dos formas de envío de datos posibles: usando el método POST o usando el método GET. Por ejemplo: <form action=http://www.aprenderaprogramar.com/prog/newuser method ="get"> En el ejemplo anterior la acción que se ejecutará cuando el usuario pulse el botón “Enviar” (submit) será el envío de los datos a la url especificada usando el método get. Veamos el aspecto de un formulario cualquiera para hacernos una idea general.
Este formulario consta de varios campos que al usuario se le solicitan como Nombre, Apellidos, Correo electrónico, País y Mensaje. Posiblemente los nombres de los campos en el código HTML sean del tipo nombre_user, apellidos_user, email_user, pais_user y msg. La diferencia entre los métodos get y post radica en la forma de enviar los datos a la página cuando se pulsa el botón “Enviar”. Mientras que el método GET envía los datos usando la URL, el método POST los envía de forma que no podemos verlos (en un segundo plano u "ocultos" al usuario). Un resultado usando el método GET, a modo de ejemplo, podría ser el siguiente: http://www.aprenderaprogramar.com/newuser.php?nombre=Pepe&apellid o=Flores&email=h52turam%40uco.es&sexo=Mujer En esta URL podemos distinguir varias partes: http://www.aprenderaprogramar.com/newuser.php es la dirección web en sí. El símbolo ? indica dónde empiezan los parámetros que se reciben desde el formulario que ha enviado los datos a la página. Después del símbolo? aparecen parejas de datos con su nombre y valor separadas por el símbolo &. Las parejas dato1=valor1, dato2=valor2, dato3=valor3… reflejan el nombre y el valor de los campos enviados por el formulario. Por ejemplo: nombre=Pepe, apellidos=Flores, etc. nos dice que el campo del formulario que se denomina nombre llega con valor “Pepe” mientras que el campo del formulario que se denomina apellidos llega con valor “Flores”. Estos valores son recibidos en la página web de destino del formulario. Tener en cuenta que para separar la primera pareja de la dirección web en sí se usa el símbolo ‘?’ y para separar las restantes parejas entre sí se usa el símbolo ‘&’. Otro aspecto a tener en cuenta es que determinados caracteres no son recibidos en la URL de la misma forma exactamente en que fueron escritos en el formulario. Por ejemplo, el valor del campo email que se recibe en la URL es h52turam%40uco.es, mientras que el usuario en el formulario habrá introducido
con toda seguridad h52turam@uco.es . Como vemos, el carácter @ ha sido sustituido por los caracteres %40. Estas equivalencias se introducen automáticamente en la transmisión de datos debido a que las URLs no admiten determinados caracteres como letras con tildes, arrobas y otros. No debes preocuparte por esta codificación, ya que si posteriormente rescatamos los valores mediante otros mecanismos volveremos a obtener el texto original. Simplemente, conviene conocer esta circunstancia para no pensar que están ocurriendo cosas extrañas o errores. Hemos visto el resultado de un envío por el método GET. En el caso de un envío de datos usando el método POST, aunque estos datos también serán enviados (de una forma que podemos denominar “oculta”), no los podremos ver en la URL. Para poder recuperar los valores de los campos en el caso de un envío con el método POST necesitaríamos otras herramientas (por ejemplo valernos del lenguaje PHP para recuperar el valor de esos campos). El resultado final con ambos métodos podemos decir que es el mismo: la información se transmite de un lado a otro. La diferencia radica en que con el método GET podemos ver directamente los parámetros pasados ya que están dentro de la URL mientras que con el método POST los parámetros quedan ocultos y para rescatarlos hay que usar otras herramientas. Un ejemplo de uso del método post sería este: <form action="http://www.aprenderaprogramar.com/prog/newuser" method ="post">
¿ES MEJOR USAR EL MÉTODO GET O EL MÉTODO POST? Tanto GET como POST son métodos de envío de la información de los formularios válidos y ampliamente utilizados. Cada método tiene sus ventajas y sus inconvenientes y no se puede decir que uno sea mejor que otro. Elegir entre un método y otro depende de la aplicación concreta que se esté desarrollando y es algo que dentro de las empresas de desarrollos web suelen decidir los encargados del diseño de las aplicaciones. A nosotros en este curso básico simplemente nos interesa conocer la existencia de ambos métodos y sus características.
Para terminar, en la siguiente tabla mostramos un resumen de las diferencias entre GET y POST: MÉTODO
CONCEPTO GET lleva los datos de forma "visible" al cliente
GET
(navegador web). El medio de envío es la URL. Los datos los puede ver cualquiera.
OBSERVACIONES
Los datos son visibles por la URL, por ejemplo: www.aprenderaprogramar.com/ action.php?nombre=pedro&apellidos1= gomez
POST consiste en datos
POST
"ocultos" (porque el cliente no los ve) enviados por un formulario cuyo método de envío es post. Es adecuado para formularios. Los datos no son visibles.
La ventaja de usar POST es que estos datos no son visibles al usuario de la web. En el caso de usar get, el propio usuario podría modificar la URL escribiendo diferentes parámetros a los reales en su navegador, dando lugar a que la información tratada no sea la prevista.
input HTML, type y value. Pedir datos en formularios. Multilínea textarea. text, password. Ejemplos INGRESO DE DATOS EN FORMULARIOS Los controles de entrada de datos en formularios suelen ser controles visuales y permiten la introducción de datos o selección de opciones al usuario. Su uso depende del tipo de control y también del tipo de información que pueden obtener. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de estos elementos: - El elemento HTML input. - El elemento HTML textarea. - El elemento HTML select. - Otros elementos HTML. ELEMENTOS DE ENTRADA DE TEXTO - Entrada de línea Mediante este control podemos obtener información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter" presionada en uno de estos campos, envía el formulario que lo contiene como si pulsáramos sobre el botón submit de envío del formulario.). Este control es insertado en documentos HTML usando la etiqueta HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la página se carga, puede ser definido usando el atributo "value". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 2</title> </head> <body> <form method="post" action="action.php"> Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" /> </form> </body> </html>
- Entradas de password Este control es igual que el de entrada de línea, es decir, usamos la etiqueta input, pero en este caso escribiremos type = "password". Cuando el usuario escriba sobre este control, los caracteres ingresados quedan "escondidos" mostrándose como puntos o asteriscos para evitar que los usuarios (más bien alguien que pase por detrás) vean su contenido. Como hemos indicado habrá que indicar el valor "password" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comúnmente usado para el ingreso de contraseñas. Escribe este código en un editor de textos,
guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 3</title> </head> <body> <form method="post" action="action.php"> Ingresa tu contraseña: <input name="contrasena" type="password" value=" 123456" /> </form> </body> </html>
- Entrada de multi-línea Con este control los usuarios podrán introducir texto en una o más líneas. Se inserta utilizando la etiqueta HTML textarea y puede ser usado para escribir comentarios, mensajes, etc. que ocupen varias líneas. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 4</title> </head> <body> <form method="post" action="action.php"> Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30" >...Tus comentarios aquí...</textarea> </form> </body> </html>
En la próxima entrega seguiremos viendo más controles para formularios. EJERCICIO 2 Crea una página web que contenga un formulario de registro de usuarios que cumpla estas condiciones: Como título principal de la página debe figurar con etiquetas h1 el texto “Solicitud de alta como usuario”. Debe contener un campo entrada de línea para solicitar el nombre. Debe contener un campo entrada de línea para solicitar los apellidos. Debe contener un campo entrada de línea para solicitar el correo electrónico. Debe contener un campo entrada de línea y tipo password para solicitar la contraseña. Debe contener un campo multilínea para solicitar observaciones. El formulario se debe enviar por el método get a la dirección de destino www.diace.edu.pe
checkbox y radio en form HTML. select, option y optgroup. multiple. Listas desplegables (opciones) 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.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 5</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" checked="ch ecked" />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.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 6</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/ action.php"> Selecciona tu actividad favorita: <br /> <input name="intereses" type="radio" value="rbipelicula s" />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.
<html> <head> <meta charset="utf-8"> <title>Ejemplo del uso de formularios - 7</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 contraseña</option>
de
<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 verificación</option>
de
<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): http://aprenderaprogramar.com/action.php?entradalista1=Entrada+de+contrase %C3%B1a&entradalista2[]=Casillas+de+verificaci%C3%B3n&entradalista2[]=B otones+radio&entradalista2[]=Listas 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 3 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 Reaggae. 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 Reaggae con tres nombres de grupos o cantantes.
Formularios HTML. Botones: envío submit, Restablecimiento reset, imagen y contenido (button). BOTONES EN FORMULARIOS Un botón nos permite realizar una acción con el formulario que lo contenga. Existen dos tipos básicos de botones: botón enviar el formulario (envío o submit) y botón poner todos los campos a sus valores iniciales (restablecimiento o reset). Además de estos dos tipos de botones existe un botón especial al que denominamos “botón de contenido”, que no posee ninguna acción predefinida. El resultado de pulsar este botón o acción a ejecutar deberá ser especificado en cada caso. Los botones pueden insertarse a través de la etiqueta (tag) HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido). BOTONES DE ENVÍO (SUBMIT) Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es decir, cuando se pulsa el botón el navegador nos lleva a la dirección web indicada en el campo action y al mismo tiempo envía a esa dirección los datos que contiene el formulario. Para insertar un botón usamos la etiqueta <input … />. Para indicar que se trata de un botón de envío dentro de esta etiqueta escribiremos type = "submit". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen.
<html> <head> <title>Ejemplo del uso de formularios - 8</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/ accion.php"> <input type="submit" value="Enviar este formulario" /> </form> </body> </html>
Fíjate que hemos escrito <input type="submit" value="Enviar este formulario" />. Esta forma de escritura es una forma abreviada equivalente a: <input type="submit" value="Enviar este formulario"> </input> Ambos códigos producen el mismo resultado, pero es más habitual usar la primera forma (abreviada) que la segunda en este tipo de elementos (y en otros). En el ejemplo anterior, simplemente lo que ocurrirá al pulsar sobre el botón ‘Enviar este formulario’ es que el navegador irá a la página ‘accion.php’ y recibirá los datos que pudiera llevar el formulario. Si en vez de http://aprenderaprogramar.com/accion.php escribiéramos simplemente accion.php la direccion accion.php se buscaría dentro del mismo directorio donde se encontrara el archivo html.
BOTONES DE RESTABLECIMIENTO (RESET) Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con la etiqueta (tag) HTML input con el valor "reset" en su atributo "type". Escribe este c贸digo en un editor de textos, gu谩rdalo como archivo con extensi贸n HTML y comprueba los resultados que se obtienen.
<html> <head> <title>Ejemplo del uso de formularios - 9</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com/ accion.php"> <input type="text" defecto" /><br />
name="texto1"
value="Valor
por
<input type="checkbox" name="condiciones" checked="chec ked" /> Acepto las condiciones<br /> <input type="reset" value="Restablecer predeterminado" /> </form> </body> </html>
todos
los
campos
a
su
valor
En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para restablecer los campos a sus valores iniciales. BOTONES DE IMAGEN (IMAGE) Estos tipos de botones funcionan de la misma forma que los botones de envío salvo que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Los botones de imagen envían, además de toda la información contenida en el formulario, las coordenadas donde ha ocurrido el click cuando el formulario fue enviado. Las coordenadas se determinan desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1" las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y"). En ocasiones las coordenadas no serán útiles, pero no tenemos que preocuparnos por ello ya que bastará con recuperar la información útil y ya está. Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type". Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen (nota: como ruta de la imagen puedes poner la ruta que te apetezca).
<html> <head> <title>Ejemplo del uso de formularios - 10</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com" > <input name="boton1" type="image" src="/images/aprenderaprogramar/imagen.png"> </form> </body> </html>
Si ahora, hiciéramos click sobre el botón de imagen, podríamos observar como se envían las coordenadas donde hicimos el click. Ejemplo de cómo se reflejaría en la ruta que muestra el navegador los datos correspondientes a valores x e y de coordenadas: http://www.aprenderaprogramar.com/?boton1.x=115&boton1.y=31 Ten en cuenta que además de las coordenadas se enviará toda la información contenida en el formulario. Por ejemplo si en el formulario tuviéramos un campo nombre donde se ha introducido “Carlos” y un campo fruta donde se ha introducido “Fresa”, la url de destino sería similar a esta: http://aprenderaprogramar.com/?nombre=Carlos&fruta=Fresa&boton1.x=46&bo ton1.y=65 BOTONES DE CONTENIDO (BUTTON) Los botones de contenido pueden ser usados como botones de envío o restablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Su característica principal es que se puede insertar contenido HTML dentro de ellos y así dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc. Los botones de contenido se insertan con el tag HTML button, usando el valor "button", "submit" o "reset" en su atributo "type". Un valor button supondrá que el botón no hará nada en respuesta a un click, a no ser que se especifique una acción de otra manera (por ejemplo usando el lenguaje JavaScript, pero no vamos a explicar ahora cómo para centrarnos en el HTML). Un valor submit hará
que el botón funcione como un botón de envío. Finalmente, un valor reset hará que el botón funcione como un botón de restablecimiento de los valores predeterminados del formulario. Escribe este código en un editor de textos, guárdalo como archivo con extensión HTML y comprueba los resultados que se obtienen. <html> <head> <title>Ejemplo del uso de formularios - 11</title> </head> <body> <form method="get" action="http://aprenderaprogramar.com"> <button type="submit"> El <b>tag HTML type button</b><br /> permite contenido HTML en su interior. </button> </form> </body> </html>
Como podemos observar, hemos introducido contenido HTML dentro del propio botón; en concreto hemos usado la etiqueta <b> </b> para poner texto en negrita y la etiqueta <br /> para introducir un salto de línea. Ten en cuenta que la apariencia puede variar según el navegador que utilices. A su vez hemos escrito <button type="submit">, lo que supondrá que el botón funcione como un botón de envío. Si hubiéramos escrito <button type="reset"> el botón funcionaría como un botón de restablecimiento de valores por defecto, y su hubiéramos escrito<button type="button"> el botón no daría lugar a ninguna acción. En caso de no especificarse type para el botón, normalmente el navegador considerará que es un botón tipo submit.