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.
Mandame tu e-mail:
    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:
La estructura a = b ? c : d; es...
un bucle
una operación aritmética
una condición

el atributo window.status contiene:
el valor de la barra de estado
el valor por defecto de la barra de estado
ciertas características de la ventana

el evento load ocurre:
cuando termina de cargarse una página
cuando termina de cargarse un gráfico
cuando empieza a cargarse una página

¿Que array contiene los gráficos de una página?
document.graphics
document.images
no hay ninguno

el método alert sirve para:
hacer sonar un pitido de alarma
lanzar una ventana con información
decirle al navegador que hay un problema con el código


    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.