Curso de Javascript 1.2
    |
En esta página:
Objeto Form
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, los buenos 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 vector 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 en la etiqueta HTML:
<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. Estos son los métodos y propiedades del objeto Form:
submit()
Envía el formulario.
reset()
Devuelve los valores de un formulario a su estado inicial.
elements[]
Contiene todos y cada uno de los elementos de los que consta el formulario, es decir, los botones, cajas de textos, listas desplegables, etc. que componen un formulario. Cada elemento puede ser un objeto distinto, por lo que deberemos averiguar de qué tipo son por medio de la propiedad común type.
Objetos Text
Cuatro elementos HTML distintos (text, textarea, password y hidden) son, desde el punto de vista del DOM, objetos tan parecidos entre sí que vamos a estudiarlos conjuntamente. En realidad, sólo tienen tres propiedades verdaderamente importantes:
name
Nombre del elemento, indicado en el atributo NAME de su etiqueta HTML. Este atributo está presente en todos los objetos que son elementos de un formulario.
type
Tipo del elemento. Al igual que el anterior, esta propiedad está presente en todos los objetos que representan elementos de un formulario. En el caso de los que nos ocupan valdrá siempre "text".
value
Contiene el valor, es decir, el texto tecleado por el usuario. Es a esta propiedad a la que accederemos habitualmente.
Como ejemplo de su uso, vamos a ver ahora el código de nuestro primer formulario con validación, que comprueba si la dirección de correo electrónico que introduce el usuario es correcta:
formularios.html
<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 nombre del 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.
Objetos Checkbox y Radio
En estos objetos, tanto el atributo HTML VALUE como su correspondiente propiedad value accesible desde Javascript no corresponden a nada visible. En ambos casos, el estado del elemento es de tipo lógico: puede estar seleccionado o no. Este valor lógico se contiene en la propiedad checked.
Por tanto, para comprobar si está pulsado o no una caja de confirmación o un botón de selección específico deberemos preguntar por dicha propiedad.
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 vector 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>HTML en castellano 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.
Objetos Select y Option
El objeto Select es, con mucho, el más complicado. Esto es debido a que contiene en su interior un vector de objetos Option. Dispone de dos propiedades interesatnes:
selectedIndex
Empezando a contar a partir de cero, indica qué opción está seleccionada. Si hay varias seleccionadas, indica la opción con el índice más bajo.
options[]
Vector que contiene los objetos Option correspondientes a todas y cada una de las opciones.
El objeto Option, por otro lado, dispone de otras dos propiedades a estudiar (aparte de las comunes, como type o value):
selected
Valor lógico que será verdadero si la opción está seleccionada.
text
Texto que acompaña a la opción.
Como ejemplo, vamos a ver una lista desplegable que nos permita navegar por diversas páginas. Cada etiqueta OPTION tendrá como parámetro VALUE la dirección de la página web e incluiremos un controlador del evento onChange (que se ejecuta cuando el usuario cambia la opción escogida en la lista) que llamará a una rutina que explicamos más adelante:
select.html
<HTML>
<HEAD>
<TITLE>Ejemplo de Select</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function irA(menu){
window.location.href = menu.options[menu.selectedIndex].value;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="formulario">
<SELECT NAME="menu" SIZE=1 onChange ="irA(this)">
<OPTION VALUE="">Visitar
<OPTION VALUE="http://www.ole.es">¡Olé!
<OPTION VALUE="http://www.ozu.es">Ozú
<OPTION VALUE="http://www.ozu.com">Otro ozú
<OPTION VALUE="http://www.es.lycos.de">Lycos
<OPTION VALUE="http://www.metabusca.com">Metabusca
</SELECT>
</FORM>
</BODY>
</HTML>
La función irA simplemente utiliza la opción elegida para obtener por medio de su valor la dirección de la página a la que debe acudir.
| |