FORMULARIOS HTML

JavaScript y Formularios

Como ya hemos visto anteriormente el principal uso de los formualrios es el de recopilar información de todo tipo sobre la persona que visita nuestra página, que podemos utilizar luego para muy diversos fines:inclusión en listas de correo, corrección de nuestras páginas basándonos 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 diferrentes 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 páginas activas en el servidor, que mediante la inclusión en las páginas de código escrito en Visual Basic Script o JavaScript permiten establecer conexiones con bases de datos, validar campos, enviar páginas 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 omenciono 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.

* Validación de formularios.

El uso más general de los formularios ya hemos visto que es la recoìlación de datos del usuario, pero es muy importante que este rellen los campos que nosotros deseamos y que los datos que en ellos introduzca sean lo más reales posibles.

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 nuestr datos personales.

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.

Vamos a ver cómo se validan los datos de elementos simple, ya que luego la validación de todo el formulario será la suma de realizar este proceso con todos los campos que lo forman. Para ver el código fuente que crea los script, simplemente pulse sobre la ventana del script con el botón derecho del ratón y seleccione "ver código fuente".

* Validación de una caja de texto:

- El primer paso será 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.

- 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, será 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 etablecer una ayuda más 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.

- Ahora que vamos a trabajar con Euros, podemos formatear una entrada de campo a euros con decimales. ver ejemplo. 

- O afinando más podemos adaptar el script para que se ponga automáticamente el símbolo del euro y el número se formatee a comas decimales y a punto con dos decimales. 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. 

- Si combinamos una caja de texto con ena 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 automáticamente 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 más complejo, aplicando a cada campo las reglas de validación oportunas. ver ejemplo. 

* Javascript y checkbox:   

La validación de que el usuario marque alguno de los checkbos de nuestro formulario es un asunto que no se adpata a la realidad de uso, ya que por propia definición los checkbox están para que se elija uno, varios o ninguno. Si deseamos que el usuario tenga que marcar una ý sólo una opción es mejor sustituir los checkbox por botones de radio, que son los elementos que en un formulario hacen eso precisamente.

Pero podemos ampliar la propia utilidad de estos elementos usando Javascript. Veamos unos ejemplos:

- Podemos obligar al usuario a que marque sólo un número determinado de opciones dentro de un conjunto de ellas. ver ejemplo.

- A pesar de lo dicho antes, si nos interesa los checkbox también pueden ser autoexcluyentes, pero sólo es conveniente su uso en casos como el de este ejemplo, en el que obligamos al usuario a elegir entre una opción que selecciona todas las demás o marcar las que desea una a una. ver ejemplo.

- Es posible implementar un botón que marque de una vez todos los checkbox de una colección, y otro que los desmarque. ver ejemplo.

- Y también otro adicional que invierta la selección previa. ver ejemplo.

- O establecer un único botón que alterne entra marcar y desmarcar todas las opciones a la vez.
    ver ejemplo.

* Javascript y checkbox:  

Los radio button, por propia definición, permiten pocas florituras mediante Javascript, ya que su misión es permitir una sóla selección entre un grupo de ellas. No obstante, podemos dar a estos elementos alguna funcionalidad extra mediante este lenguaje de programación. Y como muestra algún que otro botón: 

- Podemos asociar un mensaje de alerta al radio botón, de tal forma que cuando el usuario pinche en él se active este mensaje de advertencia. ver ejemplo.

- O también que en vez de ser un feo mensaje de advertencia sea una suave pregunta de confirmación (aunque en realidad tenga poca utilidad real, es una forma de quedar bien). 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.

Javascript y textarea:  

Las areas de texto nos dan más juego cuando les aplicamos código Javascript, ya que son unos elementos que por propia definición son más configurables. Veamos unos ejemplos: 

- Un script básico es aquel que nos permite limitar el número de caracteres que el usuario puede entrar el la caja. En este ejemplo si excede el número permitido se le pasa un mensaje de error, invitándole a introducir de nuevo el texto con las limitaciones establecidas. ver ejemplo. 

- Pudiendo hacer este script más bonito si no permitimos que en un primer momento pueda introducir más caracteres de los permitidos y además le indicamos en un contador cuantos caracteres le quedan para llegar al límite.  ver ejemplo. 

- También podemos hacer que el texto introducido en la caja de justifique por sí sólo, y así recibiremos un texto formateado correctamente. Se puede conseguir fácilmente que la justificación se pruduzca al perder el foco el textarea, con lo que el usuario puede aprecia el cambio antes de enviar el formulario (anímese e inténtelo). ver ejemplo.

- Y continuando con el formateo del texto, aquí tenemos este script que nos convierte el introducido en la caja en código HTML con saltos de línea, ideal para convertir la información plana introducida por el usuario en código visible igual pero en un navegador. ver ejemplo.

- Un script útil es el que nos permite confeccionar con un textarea una entrada de datos explicativa y editable, para facilitar el trabajo a nuestro visitante. ver ejemplo.

- En sus viajes por la red habrá visto el típico ejemplo de código en un textarea, que se puede seleccionar por completo pulsando un enlace o un botón. Aquí va un ejemplo con un enlace.  ver ejemplo.

- Pero también podemos hacer que se seleccione todo el texto símplemente poniendo el cursor sobre cualquier parte del mismo (es decire, al coger el foco el textarea). ver ejemplo. 

- Y si queremos, la seleción se puede realizar al pulsar un botón, y podemos añadir una caja de texto que indique el tamaño en KB del código dentro del textarea. ver ejemplo. 

- Otro uso de una caja de texto puede ser la de mostrar cierta información al visitante. En este ejemplo identificamos su navegador, y para que no pueda modificar el texto de información hacemos el textarea de sólo lectura. ver ejemplo. 

Javascript y listas de selección:  

Normalmente la unión de Javascript y  listas de selección lleva a la creación de menús de navegación, bien entre páginas de un mismo sitio web bien como menú de enlaces con otros sitios. Esta aplicación de las listas de selección la veremos más adelante, dentro del capítulo formularios y menús.

Pero también podemos encontrar otros usos del lenguaje Javascript aplicado a las isitas de selección. Veamos algunos ejemplos:

- Imagine que queremos que nuestro visitante seleccione un día del més en curso. Podríamos introducir una caja de texto simple para realizar esta operación, o podríamos usar una lista de selección que contuviera símplemente opciones del 1 al 31. Pero podemos implementar esto de una manera correcta si facilitamos al visitante una lista de selección que incluye los días del més en curso, y que se renueva sóla cada més que pasa. ver ejemplo.

- Mediante una lista de selección y un textarea podemos crear una lista con explicación de cada opción. ver ejemplo. 

- Si unimos dos listas podemos crear un mecanismo de selección múltiple, de tal forma que según el valor seleccionado en la primera cambiarán los valores de elección en la segunda. Note en este script cómo si seleccione la opción "otros" surgirá una ventana que le prguntará cual es el nuevo país, incluyéndolo entonces en la lista. ver ejemplo.

- El siguiente script es muy complejo en su implementación, ya que contiene en su código una cadena de valores hexadecimales. Introduciendo el Código Postal de un estado americano en la caja de texto aparecerá el estado correspondiente en la lista de selección. Si quiere configurarlo para otro país, en la línea donde pone "stateRange" debe hacer constar el código postal correspondiente a cada ciudad seguido de dos iniciales que le identifiquen unívocamente, y luego introducir una etiqueta <OPTION> cuyo valor sean estas iniciales. Como ejemplo de esto he introducido Madrid con su código, el 28041. ver ejemplo. 

Javascript y botones: 

Los elementos de formulario tipo botón son uno de los tipos más útiles, y no sólo en un formulario completo, si no también como elementos aislados, ya que siempre podemos asociarlos a funciones de Javascript, de tal forma que al pinchar el botón se ejecute esta. Vamos a ver ahora unos cuantos ejemplos del uso de botones con Javascript:

- Un ejemplo clásico es el botón que nos permite ver el código fuente de una página. ver ejemplo. 

- En un formulario podemos implementar unos mensajes de confirmación cuando el usuario envía o/y borra los datos del mismo. ver ejemplo.  

- Podemos asímismo crear un botón dinámico, que va cambiando el texto que en él aparece y el enlace a la página que lleva. ver ejemplo. 

- O podemos crear un botón con estilos, con trés estados diferentes: inicial, al recibir el ratón y al quedar de nuevo suelto. ver ejemplo.

- Otro ejemplo clásico del uso de los botones son los botones de página anterior y página siguiente (Back y Forward), que nos permiten navegar por las páginas que hemos visitado anteriormente. Nota: en el ejemplo no se puede apreciar el efecto, ya que la ventana se abre nueva, por lo que no tiene historia).ver ejemplo. 

- Vamos a crear ahora un botón saltarín, que siempre llama la atención. ver ejemplo.

- Y podemos implantar un botón que se escribe a sí mismo. ver ejemplo.

- Rizando el rizo, podemos crear un botón con estilo, que cambia sus mensajes de diferentes formas y que nos enlaza cada vez con una página diferente. Es un bonito script facil de personalizar. ver ejemplo. 

Original de: www.htmlweb.net

< Anterior