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 la dirección de correo electrónico del usuario es correcta:

<HTML>
<HEAD>
  <TITLE>Ejemplo de formularios</TITLE> 
  <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"><BR>
<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. Como hay muchos tipos de campos en un formulario (cajas de texto, botones de radio, listas de selección, etc.), vamos a ver cual es el campo que, en cada uno de ellos, contiene la respuesta del usuario:

Tipo de campo	Atributo	Descripción
Hidden, Password, Text, FileUpload	value	Contiene el texto tecleado por el usuario
Checkbox, Radio	checked	Verdadero si el control de confirmación (o un botón de radio individual) está activado
Option	selected	Verdadero si la opción esta seleccionada dentro de su lista

Vamos a ver un ejemplo práctico de uso: os voy a hacer un pequeño examen, para ver cuanto JavaScript habéis aprendido. Espero que ningún profesor utilice este ejemplo para realizar sus exámenes, ya que cualquiera puede averiguar las respuestas observando el código. Aquí tenéis el examen:
No os voy a poner el código que si no me averiguais las respuestas, tramposillos... Simplemente comprueba que cada elemento del formulario de tipo radio seleccionado tiene el atributo VALUE igual a "bien". Teniendo en cuenta que el array elements contiene todos los elementos de un formulario, el código resultante es el siguiente:

function averiguarNota(examen) {
  var resultado=0;
  for (i=0;i<examen.elements.length;i++)
     if ((examen.elements[i].type=="radio") &&
        (examen.elements[i].value=="bien") &&
        (examen.elements[i].checked))
          resultado++;
  alert("Acertaste "+resultado+" de 5 preguntas.");
  return false;
}

y cada pregunta tiene la siguiente estructura:

<BR>Multivac es
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
  una porquería
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="bien">
  el mejor
<BR><INPUT TYPE="radio" NAME="Respuesta1" VALUE="mal">
  algo poco reseñable

Luego la función es llamada desde el evento submit y ya está. Podría haberse hecho también desde el evento click de un botón... siempre hay más de una manera de hacer las cosas.