Clase 11 formularios

Electiva II
Clase 11
Formularios en JavaScript
Ing. José Ricardo Tillero UPTAEB

Formularios
 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 pueden 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 utilizar el nombre del array
con su posición .elements[0] el nombre del array con el valor del atributo name .elements["nombre"] o
simplemente el valor del atributo name como una propiedad del formulario .nombre.

Propiedades de los elementos del formulario
 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.
 Propiedad type:
Indica el tipo de elemento, en los elementos de tipo input coincide con el valor del atributo 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 siguiente:
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;

Propiedades de los elementos del formulario
 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;

Obtener los datos del formulario
 Datos de campos de texto:
Lo normal cuando el usuario rellena el formulario es que nosotros queramos acceder a los datos que él ha
rellenado. Mediante JavaScript accedemos a esos datos, y podemos comprobarlos o desencadenar una acción
concreta. Podemos acceder a los datos del texto que introduce el usuario en los campos de texto <input
type="text" ...>, <input type="password" ...> y <textarea>...</textarea> mediante la propiedad
value aplicada a estos elementos.
Tengamos por ejemplo el siguiente formulario:
<form name="rellenar" action="#" >
<h2>Escribe tu texto:</h2>
<p> Escribe el título : <input name="titulo" type="text"/> </p>
<p>Escribe tu clave: <input name="clave" type="password" /></p>
<p>Escribe el texto</p>
<p><textarea name="texto"></textarea></p>
<p><input name="ver" type="button" value="ver" />
</form>
La ultima etiqueta input, de tipo button es la que nos permitirá manejar los demás elementos del formulario,
ya que en el código JavaScript le aplicamos el evento onclick que permite acceder a la función que controla el
formulario.

 Datos de campos de texto:
El texto escrito por el usuario lo recogemos y presentamos en un "div" aparte, (llamado id="caja" en nuestro
ejemplo), todo ello lo vemos en el siguiente código JavaScript:
function escribe() {
escribir = document.getElementById("caja")
miTitulo = "<h1>" + document.rellenar.titulo.value + "</h1>"
miClave = "<h3>" + document.rellenar.clave.value + "</h3>"
miTexto = "<p>" + document.rellenar.texto.value + "</p>"
escribir.innerHTML = miTitulo + miClave + miTexto
}
window.onload = function() {
document.rellenar.ver.onclick = escribe
}
Sólo nos queda poner en el body el div donde se ve el texto, por lo que insertaremos la siguiente línea, la cual
la podemos poner antes o después del formulario:
<div id="caja"><p>Espacio para tu texto, pulsa en el botón "ver" para verlo.</p></div>
Nosotros hemos puesto esta línea delante del formulario y le hemos añadido el siguiente código CSS que
convierte el div en una caja aparte:
#caja { width: 60%; float:right; border: 1px solid black; }

 Botones radio:
La información que normalmente queremos obtener de los botones radio o radiobuttons es saber qué botón
es el que ha pulsado el usuario. Tenemos por ejemplo el siguiente grupo de botones de radio:
<form name="elegir">
<input type="radio" value="red" name="color" /> Rojo <br/>
<input type="radio" value="green" name="color" /> Verde <br/>
<input type="radio" value="blue" name="color" /> Azul <br/>
<input type="radio" value="black" name="color" /> Negro <br/>
...
</form>
Lo primero que hacemos es acceder al mismo de la misma manera que a los otros elementos del formulario es
decir, acceso al documento, luego al formulario, y después al elemento mediante el atributo name. En este
ejemplo podemos acceder de cualquiera de estas dos formas:
botones = document.forms["elegir"].elements["color"];
botones = document.elegir.color;
El resultado es un array que contiene todos los botones radio. Para acceder a cada uno de ellos debemos,
como en cualquier array, llamarlos por su número entre corchetes.
Siguiendo el ejemplo anterior, el primer botón sería botones[0]. A partir de ahí podemos aplicar varias
propiedades.

 Botones radio - Propiedad checked:
La propiedad checked nos indica si el botón está seleccionado o no, esto es lo que normalmente deseamos
saber. Si el botón está seleccionado el valor devuelto es true, si no está seleccionado es false. Siguiendo el
ejemplo anterior accederíamos a la propiedad checked del primer elemento de la siguiente forma:
valor = botones[0].checked;
La variable valor será igual a true si el botón está seleccionado, y a false cuando no está seleccionado.
Mirar los botones de uno en uno hasta encontrar cual es el seleccionado no suele ser un buen sistema para
encontrarlo, por lo que normalmente se suele utilizar un bucle que recorra todos los elementos del array hasta
dar con el que está seleccionado. Esto puede hacerse de la siguiente manera:
function info() {
pulsado = document.elegir.color;
for (i=0; i<pulsado.length; i++) {
valor = pulsado[i].checked;
if (valor == true) {
elegido = pulsado[i];
}
}
return elegido;
}

 Botones radio - Propiedad checked:
En el código anterior vemos cómo se crea un bucle que recorre todos los elementos del array. Dentro de ese
bucle comprobamos cual es el elemento que esta seleccionado mediante la expresión condicional if. Una vez
obtenido el elemento seleccionado, éste es devuelto mediante la expresión return para poder seguir trabajando
con él.
 Botones radio - Propiedad value:
La propiedad value, aplicada también a cualquiera de los elementos del array, nos devuelve el valor que
hayamos dado al atributo value de ese elemento. Esto puede sernos útil, si los valores que hemos dado
podemos utilizarlos luego para el código JavaScript. En el ejemplo anterior en el atributo value hemos puesto
los códigos de los colores para utilizarlos en el lenguaje CSS; de esta manera la propiedad value será igual al
código de color necesario para utilizarlo en CSS. En el ejemplo anterior la propiedad la obtendríamos así:
cambiaColor = elegido.value;
El valor de la variable cambiaColor será el que hemos dado al atributo value; por ejemplo si hemos
seleccionado el primer botón, el valor será "red".

 Ejercicio con botones radio
Partiendo del ejemplo anterior, podemos modificar la función para que al elegir un botón, y pulsar luego sobre
un párrafo, el párrafo cambie al color seleccionado. Ppara ello modificaremos la función info() de la siguiente
manera:
function info() {
pulsado = document.elegir.color;
for (i=0; i<pulsado.length; i++) {
valor = pulsado[i].checked;
if (valor == true) {
elegido = pulsado[i].value;
}
}
cambio = document.getElementById("parrafo");
cambio.style.color = elegido;
}
Para completar el código debemos escribir el párrafo que queremos que cambie de color con el atributo
id="parrafo":
<p id="parrafo" onclick="info()">Elige un color y pulsa luego sobre este texto para que
cambie.</p>

 Botones checkbox:
Obtener la información de los botones tipo checkbox se hace de forma similar a como lo hemos hecho para los
botones de radio. La diferencia es que aquí cada botón es independiente de los demás, y no se excluyen unos a
otros como en los botones radio. Por lo tanto hay que acceder a cada botón por separado. El resultado no es un
array sino el propio botón, el cual tiene las mismas propiedades que los botones de tipo radio (checked,
value).
Para acceder al botón, lo haremos igual que al resto de elementos, es decir, mediante los atributos name.
Tengamos por ejemplo el siguiente grupo de botones checkbox:
<form name="suscripcion" action="#">
<h2>Temas que me interesan</h2>
<input type="checkbox" name="deportes" value="Deportes" />
<label for="deportes">Deportes</label><br/>
<input type="checkbox" name="noticias" value="Noticias" />
<label for="noticias">Noticias</label><br/>
<input type="checkbox" name="economia" value="Economia" />
<label for="economia">Economía</label><br/>
<input type="checkbox" name="cultura" value ="Cultura" />
<label for="cultura">Cultura</label><br/>
<input type="checkbox" name="medioambiente" value="Medio Ambiente" />
<label for="medioambiente">Medio Ambiente</label><br/><br/>
<input type="button" name="ver" value="Ver Temas" onclick="info()" />
</form>

El elemento de tipo button que hemos añadido al final es el que nos permitirá ver la información recogida
mediante los demás botones. Para saber si un elemento checked ha sido o no seleccionado, utilizaremos la
propiedad checked la cual devolverá true si está seleccionado, o false si no lo está. Por tanto para saber si el
primer botón de los anteriores está seleccionado el código es el siguiente:
seleccion1 = document.suscripcion.deportes.checked;
El valor de la variable seleccion1 será igual a true si el botón está seleccionado, o a false si no lo está.
También podemos acceder al valor del atributo value del botón mediante el código:
valor = document.seleccion.deportes.value,
el valor de la variable valor será el que le hayamos dado al atributo value del propio elemento.
El siguiente código detecta en el primer elemento del ejemplo anterior, si éste está seleccionado, y si es así
proporciona el valor del atributo value.
if (document.suscripcion.deportes.checked == true) {
deportes = document.suscripcion.deportes.value;
}
En este caso sólo si el elemento está seleccionado obtendremos el valor del atributo value.

El siguiente código JavaScript detecta si los botones anteriores están pulsados o no, y devuelve en un cuadro de texto el valor del
atributo value de los que están pulsados: El código está dentro de la función info() que puede verse al pulsar sobre el botón tipo
button.
function info() {
texto = document.getElementById("caja")
texto.innerHTML = "<h3>Usted recibirá información sobre los siguientes temas:</h3>"
if (document.suscripcion.deportes.checked == true) {
deportes = "<h4>" + document.suscripcion.deportes.value; + "</h4>";
}
else { deportes = "" }
if (document.suscripcion.noticias.checked == true) {
noticias = "<h4>" + document.suscripcion.noticias.value; + "</h4>";
}
else { noticias = "" }
if (document.suscripcion.economia.checked == true) {
economia = "<h4>" + document.suscripcion.economia.value; + "</h4>";
}
else { economia = "" }
if (document.suscripcion.cultura.checked == true) {
cultura = "<h4>" + document.suscripcion.cultura.value; + "</h4>";
}
else { cultura = "" }
if (document.suscripcion.medioambiente.checked == true) {
medioambiente = "<h4>" + document.suscripcion.medioambiente.value; + "</h4>";
}
else { medioambiente = "" }
texto.innerHTML += deportes + noticias + economia + cultura + medioambiente
}
Para que esta página funcione sólo hace falta ya añadirle el div donde se recoge la información:
<div id="caja"> </div>

 Listas desplegables:
El acceso a la información de las listas desplegables en JavaScript es un poco más complicado, ya que la lista
constituye un único elemento del formulario.
Normalmente la información que se desea obtener es qué opción u opciones están seleccionadas. y a partir de
ahí acceder al texto de la misma o a su atributo value.
Tenemos por ejemplo el siguiente formulario con una lista desplegable:
<form name="tipoTexto" action="#" >
<h2>Elige el tipo de letra y luego pulsa el botón para cambiarla</h2>
<select name="fuente" id="fuente" >
<option value="arial">Arial</option>
<option value="times new roman">Times New Roman</option>
<option value="comic sans ms">Comic Sans MS</option>
<option value="courier new">Courier New</option>
<option value="verdana">Verdana</option>
<option value="garamond">Garamond</option>
</select><br/><br/>
<input type="button" name="pulsar" onclick="letra()" value="Cambiar tipo de letra" />
</form>
Lo primero que debemos hacer es acceder al elemento select. para ello procederemos como en los elementos
anteriores, mediante los valores de las etiquetas name.
lista = document.tipoTexto.fuente;

 Listas desplegables:
Una vez hemos accedido al elemento select tenemos dos propiedades que nos ayudarán a buscar la opción elegida:
options: Crea un array con todas las opciones del elemento select.
opciones = lista.options;
La variable opciones será un array que contiene todos los elementos de la lista.
selectedIndex: Esta propiedad indica el número que ocupa en el array el primer elemento seleccionado. La propiedad
se aplica sobre el elemento select, por lo que en este formulario será:
num = lista.selectedIndex;
Ahora debemos darle al array de opciones el valor obtenido en la propiedad selectedIndex para buscar la opción que
está seleccionada.
seleccionado = opciones[num];
Si no queremos dar tantos pasos creando las variables podemos poner el código directamente con el valor de esas
variables, en este caso sería:
seleccionado = lista.options[lista.selectedIndex];
Una vez hemos accedido al elemento seleccionado, éste tiene dos propiedades que pueden sernos útiles para
identificarlo, estas propiedades se aplican a los elementos del array options, por lo que debemos aplicarlas al elemento
una vez seleccionado.

 Listas de selección múltiple:
La propiedad selectedIndex no nos sirve para acceder a los elementos seleccionados en una lista de
selección múltiple, es decir cuando se nos permite elegir varias opciones, ya que esta propiedad nos indica
únicamente la primera opción seleccionada, sin decirnos cuáles son las demás.
Para ello utilizaremos la propiedad selected, que se aplica al array de opciones option:
seleccion = lista.option[0].selected;
En este ejemplo estamos comprobando si el primer elemento de la lista está seleccionado o no; en este código
lista es el elemento select del formulario, y la variable seleccion puede recibir los valores true si está
seleccionada, o false si no lo está.
Para comprobar las variables que están seleccionadas, lo normal es crear un bucle que recorra el array
options y nos diga mediante una instrucción if que valores están seleccionados y cuales no.
La siguiente página de ejemplo nos muestra cómo se puede acceder a los valores seleccionados en una lista
desplegable con selección múltiple.

 Listas de selección múltiple:
<!DOCTYPE html>
<html>
<head>
<title>Acceso a listas de selección multiple</title>
<script type="text/javascript">
function escribe() {
lista = document.elige.grupos;
opciones = lista.options;
escribir = document.getElementById("respuesta");
escribir.innerHTML = "“;
for (i=0;i<opciones.length;i++) {
if (opciones[i].selected == true ) {
grupos = opciones[i].text;
escribir.innerHTML += grupos + "<br/>“;
}
}
}
</script>
</head>
<body>
<form name="elige" action="#" >
<h2>Elige varios grupos de rock de la siguiente lista:</h2>
<select name="grupos" multiple="multiple" >
<option value="Rolling Stones">Rolling Stones</option>
<option value=">Led Zeppelin">Led Zeppelin</option>
<option value="Dire Straits">Dire Straits</option>
<option value="Pink Floid">Pink Floid</option>
<option value="Queen">Queen</option>
<option value="The Police">The Police</option>
</select><br/><br/>
<input type="button" name="pulsar" onclick="escribe()“ value="pulsa después de elegir" />
</form>
<p >Has elegido los siguientes grupos:</p>
<h4 id="respuesta"><h4>
</body>
</html>

 Botones con texto:
Los botones de tipo reset o tipo submit (botones con texto), no tienen muchas opciones en JavaScript, ya que
con ellos el usuario no nos proporciona información, sino que sirven para que el usuario maneje la información
que ya tiene escrita. Sin embargo podemos acceder al texto que hay escrito en el botón, para modificarlo,
mediante la propiedad value, por ejemplo, al siguiente formulario:
<form action="#" name="formulario">
....
<input name="enviar" type="submit" value="enviar" />
</form>
Podemos acceder al texto del botón mediante la propiedad value de la siguiente manera:
texto = document.formulario.enviar.value;
La variable texto tendrá por valor el de el atributo value de este elemento, en este caso será "enviar“, si
queremos cambiar el texto del botón escribiremos:
document.formulario.enviar = "enviado“;
El siguiente código hace que al pulsar el botón cambie el texto que hay en el mismo:
<input name="enviar" type="submit" value="enviar" onclick="this.value = 'enviado'" />

 Botones con texto:
Recuerda que los botones tipo reset y tipo submit nos permiten respectivamente borrar o resetear el
formulario, y enviarlo a la dirección marcada en el atributo action de la etiqueta form.
Por otra parte también podemos utilizar los eventos onreset y onsubmit para activar el código JavaScript
cuando el formulario sea enviado o reseteado. Estos eventos deben ponerse en la etiqueta form, al principio del
formulario, aunque su efecto se produzca cuando se pulsen estos botones.
A veces podemos sustituir los botones de reset o de submit por botones tipo button, en este caso mediante
código JavaScript indicaremos cuál es el tipo de acción que debe desencadenarse al pulsarlo.
Para enviar o resetear un formulario desde un botón tipo button utilizaremos los métodos reset() y submit()
aplicados al elemento que engloba el formulario. forms[...].

Validación de formularios
La validación de formularios se observara
en los ejercicios resueltos de validación
de formularios y en los videos del
Internet sobre el mismo tema.

Clase 11 formularios

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Clase 11 formularios

Similar a Clase 11 formularios (20)

Más de José Ricardo Tillero Giménez

Más de José Ricardo Tillero Giménez (20)

Último

Último (20)

Clase 11 formularios