PDF de programación - Tema 3.6 - Formularios en JavaScript

Índice: Tema 3.6

3.6 Formularios en JavaScript

3.6.1 Acceso y propiedades
3.6.2 Métodos y utilidades
3.6.3 Validación de formularios

Índice: Temas 3.6 y 3.7

3.6 Formularios en JavaScript

3.6.1 Acceso y propiedades
3.6.2 Métodos y utilidades
3.6.3 Validación de formularios

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Formularios en JavaScript

 La programación de aplicaciones que contienen formularios web siempre ha sido 

una de las tareas fundamentales de JavaScript:

• Una de las principales razones por las que se inventó el lenguaje de programación 

JavaScript fue la necesidad de validar los datos de los formularios directamente en el 
navegador del usuario. De esta forma, se evitaba recargar la página cuando el usuario 
cometía errores al rellenar los mismos.

 No obstante, la aparición de las aplicaciones AJAX ha relevado al tratamiento de 

formularios como la principal actividad de JavaScript:
p

p

p

• Ahora, el principal uso de JavaScript es el de las comunicaciones asíncronas con los 

servidores y el de la manipulación dinámica de las aplicaciones.

 De todas formas, el manejo de los formularios sigue siendo un requerimiento 

imprescindible para cualquier programador de JavaScript.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

3

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Acceso a los formularios y sus elementos

 Cuando se carga una página web, el navegador crea automáticamente un array

llamado forms (accesible desde el objeto document)  que contiene la 
referencia a todos los formularios de la página.
var primerFormulario = document.forms[0];

 Además, para cada formulario se crea otro array elements con la referencia a 

todos los elementos (cuadros de texto, botones, listas, etc…) del mismo:
var primerElementoDelPrimerFormulario = document.forms[0].elements[0];

 Otra opción (mejor que la anterior) es acceder mediante nombre o id con las 

funciones del DOM. Por ejemplo, supóngase que al primer formulario e la página 
tiene una id="formulario", entonces, para acceder al mismo, se puede hacer:
var primerFormulario = document.getElementbyId("formulario");
var primerFormulario = document.formulario; // si name="formulario"

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

4

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Propiedades de los elementos

 Cada elemento dispone de las siguientes propiedades útiles para el desarrollo de 

las aplicaciones:
• type: Indica el tipo de elemento (control) del formulario. Para los elementos de tipo 
<input> coincide con el valor de su atributo type. Para los elementos <select> su valor es 
select‐one o select‐multiple. Para los elementos de tipo <textarea>, su valor es textarea.
• form: Referencia directa al formulario al que pertenece el elemento. Ejemplo de uso: 
document.getElementById("id_del_elemento").form
• name: Valor del atributo name del HTML. Solamente se puede leer su valor.
• value: Permite leer y modificar el valor del atributo value del HTML. Para los campos de 
texto (<input type="text"> y <textarea>) obtiene el texto que ha escrito el usuario. Para los 
botones obtiene el texto que se muestra en el botón. Para los elementos checkbox y 
radiobutton no es muy útil (como se verá más adelante).

y

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

5

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Principales eventos (1)

 Los eventos más utilizados en el manejo de formularios son:

• onclick: Evento que se produce cuando se pincha con el ratón sobre un elemento. 
Normalmente se utiliza con cualquiera de los tipos de botones que permite definir HTML 
(<input type="button">, <input type="submit">, <input type="image">).
• onfocus: Evento que se produce cuando el usuario selecciona un elemento del 
formulario (gana el foco).
• onblur: Evento complementario de onfocus, ya que se produce cuando el usuario ha 
deseleccionado un elemento por haber seleccionado otro (pierde el foco).
• onchange: Evento que se produce cuando el usuario cambia el valor de un elemento de 
texto (<input type="text"> o <textarea>). También se produce cuando el usuario selecciona 
una opción en una lista desplegable (<select>). El evento sólo se produce si después de 
realizar el cambio, el usuario pasa al siguiente campo del formulario.

p

g

p

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

6

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

EJERCICIO  36

 Principales eventos (2)

 Probar los eventos onfocus, onblur y onchange sobre el primer cuadro de 
texto del siguiente formulario mostrando mensajes que informen de su estado.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

7

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Acceso a valores (1)

 A continuación se muestra cómo obtener el valor de los campos de formulario más 

utilizados:

• Cuadros de texto y textarea: El valor del texto mostrado por estos elementos se obtiene y 
se establece directamente mediante la propiedad value.
• Casillas de verificación y botones de radio: Además de value, la propiedad checked
devuelve true si el elemento está seleccionado y false en caso contrario.
• Las listas de selección: En general lo que se quiere obtener es el valor de la propiedad 
value para los elementos seleccionados Para ello las listas disponen del array options
value para los elementos seleccionados. Para ello, las listas disponen del array options
con todas las opciones de la lista y la propiedad selectedIndex con el índice de la 
opción seleccionada. A continuación, las propiedades text y value de la opción 
correspondiente proporcionan el texto y valor de la misma respectivamente.
var objlista = document.getElementById("id_del_select");
var valor = objlista.options[objlista.selectedIndex].value;
var texto = objlista.options[objlista.selectedIndex].text;

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

8

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

EJERCICIO  37

 Acceso a valores (2)

 Acceder a los campos del siguiente formulario y mostrar el resultado en la caja de 

la derecha con el formato especificado.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

9

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 El elemento innerHTML

 Una posibilidad para agregar los párrafos con el resultado de cada una de las 
lectura de los datos del formulario de la izquierda en la caja de la derecha, es 
utilizar los métodos del DOM. Para ello:

• Se crea el párrafo con el primer resultado y se añade a la caja mediante el método 
appenChild (transparencia 20 del Tema 3.3).

 Otra posibilidad, es utilizar la propiedad innerHTML de la caja. Dicha propiedad la 
tienen todas las etiquetas HTML (objetos DOM) y permite modificar el contenido 
de las mismas
de las mismas.

• Se crea una cadena (string) con los párrafos resultado, y se establece como contenido de la 

caja (supóngase un id de la misma id=“resultado”):
caja (supóngase un id de la misma id resultado ):
cadena = "<p>El valor del cuadro de texto es " + document.formulario.texto.value +

".</p></br> <p>El valor del area de texto es " + document.form...

document.getElementById("resultado").innerHTML = cadena;

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

10

3.6
3.6.1

FORMULARIOS EN JAVASCRIPT
ACCESO Y PROPIEDADES

 Funciones de parseo a datos numéricos

 Los valores leídos de los diferentes campos de un formulario son cadenas (string), 
por lo que puede ser necesario convertirlos a un tipo diferente si se desea operar 
con ellos.

 Supóngase el caso en el que los valores tomados de dos campos de texto son los 

operandos de una suma: el resultado de 1 + 2 daría la cadena 12.

 Java Script (al igual que otros lenguajes) posee una serie de funciones para llevar a 

cabo la conversión entre tipos adecuada:

• parseInt(cadena, base): Devuelve el número entero al que convierte la cadena entrada 
según la base especificada. Una base de 10 indica una conversión a número decimal, 2 
binario 8 octal 16 hexadecimal etc
binario, 8 octal, 16 hexadecimal, etc…

• parseFloat(cadena): Devuelve el número en punto flotante al que convierte la cadena 

entrada.

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

11

Índice: Temas 3.6 y 3.7

3.6 Formularios en JavaScript

3.6.1 Acceso y propiedades
3.6.2 Métodos y utilidades
3.6.3 Validación de formularios

FORMULARIOS EN JAVASCRIPT

3.6
3.6.2 MÉTODOS Y UTILIDADES

 Métodos

 Además de poder acceder a los valores de cada uno de los elementos de un 

Quita el foco al elemento.

Pone el foco en el elemento.

formulario, éstos disponen de ciertos métodos de utilidad:
• blur():
• focus():
• select():
()
• add(opt,pos): Añade una nueva opción a la lista en la posición especificada.
• click():
• click():
• reset():
• submit():

Selecciona el texto de un cuadro o área de texto.

Simula la pulsación de un botón o una casilla
Simula la pulsación de un botón o una casilla.

Simula la pulsación del botón de reset.

Simula la pulsación del botón de envío.

ó

ó

í

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE

13

FORMULARIOS EN JAVASCRIPT

3.6
3.6.2 MÉTODOS Y UTILIDADES

 Establecer el foco

 En páginas de búsqueda o páginas con un formulario para registrarse, se considera 

una buena práctica de usabilidad el asignar automáticamente el foco al primer 
elemento del formulario cuando se carga la página.
window.onload = function() {

document.getElementById("id_del_elemento").focus();

}

 Evitar duplicados

p

 Uno de los problemas habituales con el uso de formularios web es la posibilidad 

de que el usuario pulse dos veces seguidas sobre el botón "Enviar".
<input type="button" value="Enviar" onclick= "this.disabled=true;

this.value='Enviando... ';
thi f
b it() " /
this.form.submit();" />

APLICACIONES WEB

TEMA 3: PROGRAMACIÓN EN EL LADO DE