Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

7. Formularios (I)

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 tratamiento. 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 un texto escrito por el usuario que queremos que aparezca en otra parte de la página. Los botones de radio, de checked, y las listas desplegables pueden servirnos para que el usuario elija el aspecto de la página cambiando código CSS, etc. En casos como estos no es necesario enviar el formulario, ya que su función es otra.

También para cuando queremos enviar el formulario, 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 con todos los 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 sea el primero de la página, cualquiera de estos códigos nos valdría:

document.forms[0];
document.forms["datos"];
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 campos del formulario, 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 o campos 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;

Igual que hemos hecho para acceder al formulario, aquí también 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. 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 que desde un elemento, podamos 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

Obtener datos I

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com