|
|||||
|
|
|
|
|
|
|
|
||||
|
|
||||
|
|||||
JavaScript y formularios (I)
Como ya hemos visto anteriormente el principal uso de los formlarios es el de recopilar información de todo tipo sobre la persona que visita nuestra pagina, que podemos utilizar luego para muy diversos fines:inclusión en listas de correo, corrección de nuestras paginas basandonos en la opinión de nuestros visitantes, recepción de artículos y programas por, etc.
Pero si bien los formularios son muy útiles si los sabemos usar bien, por sí sólos tienen poca utilidad, y esto es debido a que co el uso exclusivo de HTML podemos crear el formulario, pero no disponemos de herramientas que nos permitan ni procesar los datos recibidos, ni validar los datos introducidos antes de su envío ni dar vida a los campos para que la interactividad con el usuario sea la adecuada.
Estas utilidades se consiguen mediante el uso de diversas tecnologías que deben ir siempre unidas a los formularios y al HTML. Entre ellas caben destacarse:
* JavaScript, que es el alma propia de la iteractividad de los formularios en el lado cliente, y que nos va a permitir validar los datos antes de su envío, establecer interacciones entre los diferentes elementos del formulario, poder acceder a todos o algunos de los elementos del formulario para poder cambiar sus atributos o aspecto, etc.
* CGI, abreviatura de COMMON GATEWAY INTERFACE, que es una tecnología que permite el procesamiento de los datos del formulario en el lado del servidor, para poder incorporarlos a una base de datos, enviarlos mediante e-mail de una forma comprensible, etc. Se basa en unos programas escritos normalmente en C o en Perl, que suelen estar en el servidor en una carpeta especial llamada cgi-bin.
* ASP - JSP, abreviaturas de Active Server Pages y Java server Pages, que son tecnologías de paginas activas en el servidor, que mediante la inclusión en las paginas de código escrito en Visual Basic Script o JavaScript permiten establecer conexiones con bases de datos, validar campos, enviar paginas de respuesta edacuadas, etc.
Todas estas tecnologías escapan al fin de este manual, existiendo en la red gran cantidadd e manuales de todas ellas, y a los que os refiero para poder comprenderlas y utilizarlas.
Lo que sí voy a hacer en este capítulo es indicar diferentes utilidades que le podemos dar a los formularios en unión con JavaScript y mostrar una serie de ejemplos de cada una de ellas, poniendo a vuestra disposición el código fuenta que las origina. La mayoría de estos ejemplos los he recopilado en mis ratos en la red, por lo que no los he escrito yo. POr esto pido a los autores de los mismos que si no menciono su nombre explicitamente en bien porque no lo se, bien po no hacer este capítulo demasiado extenso. Gracias a todos ellos por su contribución al avance de la programación web.
* Javascript y formularios.
Sin lugar a dudas la herramienta mas útil con la que contamos para hacer nuestros formularios mas eficientes es el uso del lenguaje de scripting Javascript. Es un lenguaje formado por trozos de código que se insertan en las propias paginas web, y que permite el manejo dinamico de las mismas por parte del programador, de tal forma que es posible verificar y/o cambiar propiedades de los elementos de la pagina sin tener que volver a realizar una conexión con el servidor, así como realizar calculos y transferencias de datos entre los campos del formulario. Los ejemplos que siguen en lo sucesivo abarcan diferentes grados de complejidad, siendo recomendable que el lector acuda a un buen manual de Javascript en casos de duda.
* Javascript y cajas de texto:
- El primer paso sera comprobar que el usuario no deje el campo en blanco. El siguiente ejemplo lanza un mensaje de error si se pretende enviar el formulario con la caja de texto sin rellenar, y devuelve el foco a la misma. ver ejemplo.
- Y que el foco del cursor se establezca en el primer campo o en el que deseemos. ver ejemplo.
- También nos puede interesar que en cada palabra de las introducidas en la caja su primera letra pasa a mayúscula. ver ejemplo.
- O podemos hacer que sólo la primera letra del texto introducido pase a mayúscula. ver ejemplo.
- O que todo el texto introducido pase a mayúsculas. ver ejemplo.
- O tal revés, que todo el texto pase a minúsculas. ver ejemplo.
- También nos puede interesar quitar los espacios en blanco que se hayan introducido en la caja antes del envío, ya que estos pueden dar problemas al programa CGI. ver ejemplo.
- Otro script nos permite reemplazar espacios en blanco por el signo " + ". ver ejemplo.
- Podemos quitar los espacios en blanco al principio del texto, especialmente útil cuando queremos subir archivos al servidor. ver ejemplo.
- O quitarlos al final del texto, igualmente útil cuando queremos subir archivos al servidor. ver ejemplo.
- Y para subir archivos al servidor, ¿qué mejor que filtrar el tipo de estos permitido?. ver ejemplo.
- Podemos eliminar ciertas palabras que consideremos obscenas o de mal gusto antes del envío. En el siguiente ejemplo se han eliminado entre otras "sex, babes, shit, fuck, damn, porno, cum, cunt, prick, pecker, ass". Si el usuario introduce alguna de ellas, sera inmediatamente sustituida por un conjunto de caracteres predefinido. ver ejemplo.
- Se puede establecer una caja de texto que no admita caracteres determinados, y que al introducir uno de ellos simplemente no lo escriba. ver ejemplo.
- O que no deje introducir comillas, ni dobles ni simples. ver ejemplo.
- Asímismo podemos eliminar la entrada de números el la caja de texto, para campos que queramos que sean exclusivamente para introducir letras. ver ejemplo.
- O usar un script que sólo permita la entrada de números, especialmente util para campos como códigos postales o números de cartillas de la seguridad social. ver ejemplo.
- Podemos especificar lo que se debe introducir en el campo en un mensaje inicial dentro de este, de tal forma que al poner el cursor dentro de la caja de texto el mensaje se borre. ver ejemplo.
- O podemos establecer una ayuda mas completa explicando el contenido de los campos. En este ejemplo se explican dos campos mediante ventanas, con copia de los datos introducidos al formulario original. ver ejemplo.
- En cuanto a trabajar con números, podemos por ejemplo validar que sólo se introduzcan números sin decimales o con dos decimales. ver ejemplo.
- Y también podemos redondear el número entrado en la caja a cualquier número de decimales.ver ejemplo.
- Ahora que vamos a trabajar con Euros, podemos formatear una entrada de campo a euros con decimales ( en el servidor de Terra no lo podéis ver, ya que no reconoce el símbolo del euro. Acudid al servidor principal. ver ejemplo.
- O afinando mas podemos adaptar el script para que se ponga automaticamente el símbolo del euro y el número se formatee a comas decimales y a punto con dos decimales ( en mi servidor actual no lo podéis ver, ya que no reconoce el símbolo del euro. Si estáis interesados, escribidme y os lo envío). ver ejemplo.
- Otro script muy util es el que valida una entrada de Código Postal, de tal forma que se deben introducir 5 dígitos en el campo. ver ejemplo.
- A la hora de manejar entradas de fecha podemos usar un completo script para que la entrada sea la deseada. ver ejemplo.
- Y para validar una entrada de e-mail disponemos de este completo script que valida la entrada a fondo. ver ejemplo.
- Y este otro que no se queda a la zaga, yaque analiza no sólo que aparezca el símbolo "@", si no también que contenga un sufijo adecuado. ver ejemplo.
- Si combinamos una caja de texto con una lista de selección podemos facilitar al usuario la búsqueda de un término concreto entre una lista de preestablecidos. ver ejemplo.
- Y si lo que combinamos son dos cajas de texto podemos hacer que el usuario sólo pueda rellenar una de ellas, a su elección. ver ejemplo.
- O podemos verificar si la entrada en los dos campos es la misma, idoneo para verificar la entrada de una contraseña. ver ejemplo.
- Y si trabajamos con números de teléfono podemos lograr que se entre en un campo el prefijo y automaticamente se salte a otro campo para introducir el número, estando la longitud de ambos campos acotada. ver ejemplo.
- Uniendo varias cajas de texto podemos ir construyendo un formulario mas complejo, aplicando a cada campo las reglas de validación oportunas. ver ejemplo.
- Si nuestra pagina contiene mucha información podemos facilitar la búsqueda a nuestro visitante introduciendo en ella una caja de texto que le permita buscar términos por medio de una palabra clave. ver ejemplo.
- Y puestos a facilitar búsquedas a nuestro visitante ¿Porqué no hacer que pueda buscar en Internet?. ver ejemplo 1. ver ejemplo 2. ver ejemplo 3.
- Vamos ahora con la hora. Podemos inplementar una caja que muestre la hora en dos formatos diferentes. ver ejemplo.
- Y si nuestro visitante debe introducir una fecha en una caja de texto podemos simplificarle el trabajo ofreciéndole un calendario para que la marque, y se situara automaticamente en la caja (para copiar este ejemplo te haran falta el archivo date-picker.js y la imagen. ver ejemplo.
- Siguiendo con fechas, vamos a ofrecer al navegante un calendario perpetuo, en el que puede averiguar qué día de la semana fué un día en concreto. ver ejemplo.
- Si vamos a pedir al visitante que introduzca el número de su tarjeta de crédito podemos hacer dos cosas: una validar que la tarjeta es correcta, y dos encriptar el número para que viaje mas seguro por la red. ver ejemplo.
- Un script muy útil, tanto para el navegante como para nosotros mismos en aquel que muestra en una caja de texto el tiempo que ha tardado en cargarse la pagina. ver ejemplo.
- Otro ejemplo de cómo Javascript trabaja con el tiempo: dos cronómetros, uno de cuenta adelante y otro de cuenta atras. ver ejemplo.
- Y ahora una caja de texto que muestra en su interior un calculo dinamico aproximado de la población mundial. ver ejemplo.
- Y otra que muestra al usuario el tiempo que lleva viendo la pagina. Si este script lo insertamos en una pagina con frames dentro de un frame que esté siempre presente nos dara el tiempo de estancia en nuestro sitio web. ver ejemplo.
- Con una caja de texto podemos crear un cronómetro simple pero eficaz. ver ejemplo.
- Si redireccionamos nuestra pagina a otra es siempre conveniente situar en la primera un contador que indique al navegante cuanto le queda para pasar a la nueva. ver ejemplo.
- Vamos a ver un script muy útil: introducimos en la caja la dirección de nuestra pagina web y obtendremos aquellas otras paginas que tienen un enlace a la nuestra (por medio del buscador de Altavista). ver ejemplo.
- Y en este otro introducimos una dirección URL y podemos ver el código fuente de la pagina solicitada. ver ejemplo.
- Podemos utilizar Javascript para deducir la letra que corresponde a un DNI determinado, aunque ya todos los documentos vienen con la letra correspondiente. ver ejemplo.
- Un buen uso que podemos dar a una caja de texto es crear con ella un banner o ticker que muestra información al usuario. ver ejemplo.
- Y con varias cajas de texto podemos crear unas entradas para identificación de usuario mediante claves, con la particularidad en este caso de que las vemos a guardar en una cookie, de tal forma que las sucesivas veces que el usuario acceda a la pagina se le rellenaran solos los dos primeros campos, debiendo este entrar sólo la contraseña. ver ejemplo.
 |
 |
