Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 42
Visitas el mes pasado: 132
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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.
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
),
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.
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"
.
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
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"
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
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