|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
Uso de los formularios (I)
* Validación de formularios:
Todos nos hemos visto en la necesidad de tener que rellenar alguna vez un formulario, y hemos experimentado esa sensación de intromisión en nuestra intimidad que supone mandar por la red a alguien que no conocemos nuestros datos personales. Esto pruduce que a veces el visitamte de una página web que se vea abocado a completar un formulario lo haga introduciendo en los campos una serie de caracteres sin sentido, con el único afán de que nuestra página le permita seguir adelante sin tener que preocuparse por lo que va a pasar con sus datos. Y a veces hay que contar también con errores involuntarios a la hora de completar el formulario.
Por lo tanto se hace necesario un proceso de verificación de estos datos, que en el lado del cliente lo vamos a realizar usando JavaScript.
Una vez vistos los script que nos permiten validad separadamente los elementos que componen un formulario es hora de unir estos conocimientos para enfrentarnos a casos más complejos, en los que hay que validar un formulario completo.
Partiendo de los conceptos aprendidos, podríamos establecer en una sóla página tantas definiciones de script y tantas funciones como nos hizieran falta, pero sería complicar excesivamente el código. Es mejor crear una función completa en un solo script, si bien utilizando lo ya visto para cada campo.
Vamos a ver algunos ejemplos:
- Para comenzar vamos a ver un formulario que requiere que todos los campos sean completados. Si queda alguno vacío se lanza una ventana de aviso, requiriendo al visitante a completarlo completamente. Si todos los campos son escritos se lanza una ventana de comprobación, trás la que se envían los datos al servidor. ver ejemplo.
- La mayoría de las entradas de un formulario suelen ser cajas de texto. Vamos a ver ahora cómo podemos establecer una función que compruebe diferentes cajas, cada una con un tipo de datos requeridos. Como complemento, al procesar los datos enviamos una ventana de aviso al usuario, en la que figuran todos los errores encontrados. ver ejemplo.
- El siguiente ejemplo es parecido al anterior, pero es más real. Lo completamos con un campo en el que se debe introducir una dirección web correcta. ver ejemplo.
- Este es un buen ejemplo de validación. Se verifican todos los campos del formulario, devolviendose el cursor al campo en el que hay error. Se completa con diversos mensajes informativos para el usuario. ver ejemplo.
- Y también podemos enbellecer los mensajes de error mediante imágenes. ver ejemplo.
- Es posible crear un bonito formulario de elecciones de grupos a base de radio botones, y podemos asegurarnos de que el usuario no deja ninguna opción sin elegir. ver ejemplo.
- Vamos con algo un poco más complicado. El siguiente formulario no sólo valida sus campos; además, guarda mediante una cookie los datos introducidos la primera vez, de tal forma que cuando el usuario viste el formulario por segunda vez los datos que introdujo se completarán sólos. Si introduce datos nuevos, estos también se guardarán en la cookie. ver ejemplo. Ya estudiaremos las cookies más detalladamente.
- Y ahora un ejemplo más sencillo y claro de código: un formulario que valida documento (NIF, Pasaporte o Tarjeta de Residente) y e-mail. ver ejemplo.
- Si tenemos en nuestra página una entrada para tarjeta de crádito, el siguiente script nos será de grán ayuda, ya que chequea a fondo la validez de la tarjeta introducida. ver ejemplo.
* Otros tipos de formularios:
- Podemos trabajar sobre la base de lo ya visto para crear formularios de todo tipo. El siguiente ejemplo muestra un formulario en el que los campos van apareciendo sucesivamente uno tras otro, almacenándose la información de cada uno de ellos hasta el envío final. En botón de envío está desactivado.ver ejemplo.
- Otro tipo de formulario es aquel que podemos usar para enviar correo electrónico a las personas seleccionadas. ver ejemplo.
- Es muy útil a veces poder desactivar y/o activar elementos de formulario cuando nos convenga. Un ejemplo típico sería el caso de establecer ciertos campos que sólo se puedan rellenar si antes se cumple alguna condición. Como enumerar una a una todas las posibles combinaciones sería muy largo, en el siguiente ejemplo podemos ver (y obtener de su código) cómo se activan y desactivan numerosos tipos de campo, siendo posible hacerlo elemento a elemento o todos a la vez. ver ejemplo.
- Utilizando las propiedades de visibilidad de una capa podemos crear un formulario en el que el botón de envío sólo aparece cuando se rellenan todos los campos del mismo. ver ejemplo.
- O un formulario que va mostrando uno trás otro diversos grupos de campos. ver ejemplo.
- Otro de los usos clásicos que podemos dar a un formulario es el de creación de un mecanismo de búsqueda en la WWW. El siguiente permite al usuario buscar en uno de 7 motores de búsqueda. ver ejemplo.
- Y también podemos usar un formulario para mostrar información sobre el tipo de navegador que está usando nuestro visitante. ver ejemplo.
- En nuestros viajes por la red nos encontramos a veces con una página cuya URL aparece ocultada a propósito, mostrando en la barra de direcciones más que una URL un galimatías incomprensible. Pués bien, mediante el siguiente formulario podemos desliar la madeja y obtener la URL limpia. ver ejemplo.
- También podemos usar un formulario para mostrar a nuestro visitante un completo calendario en el que puede consultar cualquier mes. ver ejemplo.
- Y para que se entretenga un rato podemos ofrecerle el conocido juego del ahorcado. ver ejemplo.
- Podemos también usar un formulario para dar al usuario información de su navegador, plataforma, fecha de carga, etc. ver ejemplo.
- Otra utilidad que podemos crear mediante un formulario es un programa encriptador: se introduce un mensaje y una palabra clave, con la que se encripta el mensaje. Para poder desencriptarlo luego es necesaria la frase inicial; si no el mensaje obtenido es ilegible. ver ejemplo.
- Una de las partes más importantes de una página web (y a la que no se le da el peso que se debe) son los meta-tags que deben figurar en el encabezado de la página. El siguiente formulario nos puede ayudar sobremanera a crear los metas adecuados. ver ejemplo.
- Siguiendo con la programación web, el formulario que sigue nos permite cambiar los atributos de la página en que se situa Ideal para hacer pruebas de diseño; una vez decididos los atributos basta con quitar el formulario de la página. ver ejemplo.
- Y con este otro formulario podemos elegir la combinación adecuada de colores para el texto y el fondo de nuestras páginas. Muy útil para diseñadores web. ver ejemplo.
- Otro uso típico de los formularios ha sido siempre la creación de test (aplicación directa de la creación de pilas, de las que veremos ejemplos en el próximo capítulo), en los que se muestran una serie de preguntas con diversas respuestas posibles, entre las cuales el usuario debe elegir la correcta. La presentación de las preguntas y respuestas puede ser variada, y la forma de mostrar el resultado obtenido también. Veamos un ejemplo. ver ejemplo.
- Gracioso pero diseñado para pocas preguntas. El siguiente ejemplo muestra un test con más posibilidades, cómo evaluación contínua. ver ejemplo.
- El siguiente script nos muestra cómo crear un secillo test; es fácil de configurar. ver ejemplo.
- En cambio el siguiente formulariio nos ofrece un test amplio y completo, en el que las preguntas del mismo varían cada vez que se carga la página, y posée un resumen final de los aciertos y los porcentajes de éxito. Muy bueno. ver ejemplo.
* Iteracción de formularios:
Una de las potentes funcionalidades de los formularios es su capacidad de iteracción entre campos, lo que posibilita el intercambio de información entre elementos de los mismos usando Javascript. Este es un factor muy importante en muchas aplicaciones web. Veamos algunos ejemplos prácticos:
- Es posible pasar la información introducida en todos los campos de un formuario, sean estos del tipo que sean. En el siguiente script se hace una copia exacta de un formulario a otro igual situado en la misma página web. ver ejemplo.
- En el siguiente formulario se comprueba que los datos han sido introducidos, y si es así se copian a otros campos. ver ejemplo.
- Si asociamos dos botones de radio con una caja de texto podemos conseguir que sólo se pueda introducir datos en la caja si se selecciona el radio que nosotros establecemos (tipico ejemplo de las condiciones de aceptación de unas reglas). ver ejemplo.
- Vamos a ver un ejemplo ahora de cómo se pasan datos de varias cajas de texto a un textarea, con lo que podemos mostrar al usuario un resumen de los datos que ha introducido. ver ejemplo.
- Y cómo se pasan de un botón de radio a una caja de texto. ver ejemplo.
- También podemos pasar datos de un textarea a una ventana nueva. ver ejemplo.
- Similar al anterior, pero más logrado. ver ejemplo.
- Y podemos hacer interactuar una caja de texto y una lista de selección, de tal forma que al introducir la primera letra en la caja se seleccine la opción correspondiente en la lista. ver ejemplo.
 |
 |