|
HTML en castellano recomienda... |
|
|
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.
|