TUTORIAL DE JAVASCRIPT

INTRODUCCIÓN

EL LENGUAJE

OBJETOS

EVENTOS

GALLETITAS

Formularios

Los formularios siempre han sido la mejor manera de facilitar la comunicación entre los usuarios y los creadores de una web. Sin embargo, la implementación de los mismos en el lenguaje HTML ha provocado ciertos problemas debido a sus carencias. Estos problemas han intentado solventarse con scripts, situados tanto en el servidor como en el navegador. Los programas albergados en el servidor suelen ser scripts CGI, y por supuesto no vamos a investigarlos en un curso de JavaScript. Solamente decir que existen infinidad de ellos y que, en general, la mayoría de proveedores de espacio web tienen alguno disponible para sus usuarios, con instrucciones de uso incluidas.
Los programas que se ejecutan en el navegador suelen estar escritos en JavaScript, y realizan tareas simples de validación. En muchas ocasiones están combinados con scripts CGI que modifican el mensaje generado por un formulario para facilitar su lectura y manejo. El array document.forms contiene todos los formularios de un documento.

Así, se accedería al primer formulario definido como document.forms[0]. Sin embargo, si usamos el parámetro NAME: 


<FORM NAME="miFormulario">

entonces podremos acceder al formulario con document.miFormulario, que resulta bastante más cómodo y estable ante la posibilidad de variación del número y posición de formularios en el documento. Vamos a ver ahora el código de nuestro primer formulario con validación, que comprueba si tu dirección de correo electrónico del usuario es correcta, si quieres comprobar su funcionamiento solo tienes que copiar este código con copiar pegar y probar: 

<HTML>

<HEAD>

  <TITLE>Ejemplo de formularios 

  <SCRIPT LANGUAGE="JavaScript">

    function validar(direccion) {

       if (direccion.indexOf("@") != -1)

          return true;

       else {

          alert('Debe escribir una dirección válida');

          return false;

       }

    }

  </SCRIPT>

</HEAD>

<BODY>

<FORM NAME="miFormulario"

     METHOD="POST"

     ACTION="mailto:yo@miproveedor.mipais"

     ENCTYPE="text/plain"

     onSubmit="return validar(this.email.value)">

Mandame tu e-mail: <INPUT NAME="email" TYPE="text">

<INPUT TYPE="submit" VALUE="Mandame tu e-mail">

</FORM>

</BODY>

</HTML>

 El código es sencillo: el código llamado por el controlador de evento onSubmit debe devolver false si deseamos que el formulario no sea enviado. Así pues, llamamos a la función que comprueba si hay alguna arroba en el campo email del formulario. La manera de llamar a esta función es quizás lo más complicado. La función validar recibe una cadena de caracteres, devolviendo verdadero o falso dependiendo de que haya o no una arroba dentro de ella. El controlador utiliza para llamar a esta función lo siguiente:

this.email.value

 this es una referencia estándar. Cuando veamos this en algún código en realidad deberemos sustituirlo mentalmente por el objeto en el que está el código. En este caso, como estamos dentro de miFormulario, this será equivalente a document.miFormulario. email es el nombre del campo que queremos investigar y value el el atributo que contiene lo que haya tecleado el usuario. Mandame tu e-mail:

Volver