Para poder seguir este curso debes tener conocimentos de los lenguajes HTML y CSS para construir páginas Web. Si no es así puedes aprenderlo en Aprende Web
Logo Aprende Web

Aprende Web

curso de JAVASCRIPT

por Anyelguti


Tema 7: Formularios

7.1. Acceso al formulario

Formularios en Javascript

Los formularios en javascript nos permiten mucho más que recopilar datos para mandarlos (o no) a una dirección o programa de recopilación. El formulario puede servirnos también para interactuar con el usuario, ya que es la forma más fácil de recoger información, que nos servirá para que el usuario pueda variar algunos aspectos de la página

Así, por ejemplo, los cuadros de texto y textarea pùeden servirnos para obtener el texto que quiere el usuario que aparezca en parte de la página; los botones de radio, de checked, y las listas desplegables pueden servirnos para que el usuario elija el aspecto que le da a la página, etc. En casos como estos no es necesario enviar el formulario, ya que esa no es su principal función.

También para los envios de formularios, javascript puede sernos muy útil, ya que nos permite comprobar si el formulario está correctamente rellenado antes de enviarlo, y mandarle al usuario los mensajes correspondientes cuando se produce un error al rellenarlo, podemos comprobar por ejemplo que ciertos campos que se consideren obligatorios no se manden vacíos, o que la contraseña y su repetición sean iguales, o que ciertos campos cumplan ciertas condiciones (por ejemplo, si pedimos un e-mail, que el texto introducido tenga entre sus caracteres una arroba -@-). Esto es lo que se llama validar el formulario.

Array de formularios

Al cargarse la página, el DOM crea un array de formularios, al que se accede desde el objeto document mediante:

document.forms

El array contiene todos los formularios de la página, en el mismo orden en el que están escritos en el código. con lo que para acceder a uno de ellos debemos saber cual es su orden y acceder mediante su número como en cualquier array, por ejemplo el acceso al primer formulario es:

document.forms[0]

Sin embargo también podemos acceder al formulario poniendo dentro de los corchetes el nombre del formulario, el cual se lo habremos dado mediante el atributo name="nombre"

por ejemplo, un formulario que empieza con la etiqueta:

<form name="datos" action=" ... " method="post" ...>

Podemos acceder a él mediante el código:

document.forms["datos"]

Donde datos es el valor del atributo name. Observa que el valor de name debe ir entre comillas.

Pero tal vez la forma más simple de acceder a un formulario es poniendo simplemente el valor del atributo name como una propiedad de document; en el caso anterior escribimos simplemente:

document.datos

Así para acceder al formulario anterior, suponiendo que esté en primer lugar cualquiera de estos tres códigos nos valdría:

document.form[0];
document.forms["datos"];
document.datos;

Sin embargo el acceso al formulario es un primer paso para poder manipularlo, ya que lo que realmente nos interesa es acceder a los elementos, y poder obtener información o manipularlos.

Acceso a los elementos del formulario

El DOM crea también dentro de cada formulario, un array con los elementos que éste contiene, el array se llama elements y podemos acceder a él de la misma manera que al array forms, por lo que también tenemos tres maneras de acceder al elemento. Seguiremos por lo tanto los mismos pasos que para acceder al formulario.

Así por ejemplo si tenemos el siguiente formulario:

<form name="datos" action="mailto:mipag@serv.com" method="post">
<p><input name="nombre" type="text" /> Nombre</p>
<p><input name="edad" type="text" /> Edad<p>
</form>

Si accedemos al formulario mediante document.datos podemos acceder al primer elemento del mismo de cualquiera de estas tres formas:

document.datos.elements[0];
document.datos.elements["nombre"];
document.datos.nombre;

Como en el acceso al formulario podemos utiilizar el nombre del array con su posición, (.elements[0]), el nombre del array con el valor del atriibuto name (.elements["nombre"]) o simplemente el valor del atributo name como una propiedad del formulario (.nombre),

Propiedades de los elementos

Una vez que hemos accedido a los elementos, estos tienen una serie de propiedades que son los que nos permitirán acceder a la información que queremos obtener para manipularlos.

En esta página vamos a mostrar una serie de propiedades comunes a todos ellos, que en algunos casos puede variar su valor dependiendo del tipo de elemento que sea; pero esto se verá con más detalle en las páginas posteriores.

Propiedad type

Indica el tipo de elemento, en los elementos de tipo input coincide con el valor del atriibuto type; en los elementos select (listas desplegables) el valor puede ser select-one si es una lista desplegable normal, o select-multiple si es una lista desplegable en la que se permite seleccionar varios elementos. En los elementos textarea su valor es textarea

En el ejemplo anterior el código sería el siguiiente:

tipo = document.datos.nombre.type

y el valor de la variable tipo sería: "text".

Propiedad form

Da acceso al formulario desde cualquier elemento del mismo, lo que permite esta propiedad es desde un elemento, acceder a su elemento padre o formulario. el código, siguiendo el ejemplo anterior será el siguiente:

formulario = document.datos.nombre.form

Propiedad name

Se obtiene el valor del atributo name. Esta propiedad es de sólo lectura, por lo que no se puede modificar su valor. el código en el ejemplo anterior será el siguiente:

valor = document.datos.nombre.name

En este caso el valor devuelto sería "nombre"

Propiedad value

Permite leer y modificar el valor del atributo value. En los campos de texto type="text", type="password" y textarea se obtiene el texto escrito por el usuario; en los botones tipo "reset o "submit" se obtiene el texto que muestra el botón, mientras que en los elementos checkbox y radiobutton no son muy útiles pues muestran el valor del atributo value. En el ejemplo anterior el código sería:

valor = document.datos.nombre.value

En las siguientes páginas se verá con más detalle esta y otras propiedades de los formularios y la forma de accedera su información, o modificarla o comprobarla.


En la siguiente página se verá cómo trabajar en javascript con los campos de texto y los botones de los formularios

7.2. Obtener datos I

Ir a la página

anteriorAnterior     Siguiente siguiente

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com manda un correo