Formularios

Formularios en Javascript

¿Qué es un formulario?

La programación de aplicaciones que contienen formularios web siempre ha sido una de las tareas fundamentales de JavaScript. De hecho, 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 formularios.

No obstante, la aparición de las aplicaciones AJAX ha relevado al tratamiento de formularios como la principal actividad de JavaScript. 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.

¿Cómo se constituye un formulario? (Propiedades y Funciones)

JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de aplicaciones que manejan formularios. En primer lugar, cuando se carga una página web, el navegador crea automáticamente un array llamado forms y que contiene la referencia a todos los formularios de la página.

Document

Para acceder al array forms, se utiliza el objeto document, por lo que document.forms es el array que contiene todos los formularios de la página. Como se trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays. La siguiente instrucción accede al primer formulario de la página:

document.forms[0];

Elements

Además del array de formularios, el navegador crea automáticamente un array llamado elementspor cada uno de los formularios de la página. Cada array elements contiene la referencia a todos los elementos (cuadros de texto, botones, listas desplegables, etc.) de ese formulario. Utilizando la sintaxis de los arrays, la siguiente instrucción obtiene el primer elemento del primer formulario de la página:

document.forms[0].elements[0];

Document.forms

En un entorno tan cambiante como el diseño web, es muy difícil confiar en que el orden de los formularios se mantenga estable en una página web. Por este motivo, siempre debería evitarse el acceso a los formularios de una página mediante el array document.forms.

Name y Id

Una forma de evitar los problemas del método anterior consiste en acceder a los formularios de una página a través de su nombre (atributo name) o a través de su atributo id. El objeto documentpermite acceder directamente a cualquier formulario mediante su atributo name:

var formularioPrincipal = document.formulario;

var formularioSecundario = document.otro_formulario;

 <form name="formulario" >

  ...

</form>

 <form name="otro_formulario" >

  ...

</form>

Name

Accediendo de esta forma a los formularios de la página, el script funciona correctamente aunque se reordenen los formularios o se añadan nuevos formularios a la página. Los elementos de los formularios también se pueden acceder directamente mediante su atributo name:

var formularioPrincipal = document.formulario;

var primerElemento = document.formulario.elemento;

<form name="formulario">

  <input type="text" name="elemento" />

</form>

Get

Obviamente, también se puede acceder a los formularios y a sus elementos utilizando las funciones DOM de acceso directo a los nodos. El siguiente ejemplo utiliza la habitual funcióndocument.getElementById() para acceder de forma directa a un formulario y a uno de sus elementos:

var formularioPrincipal = document.getElementById("formulario");

var primerElemento = document.getElementById("elemento");

<form name="formulario" id="formulario" >

  <input type="text" name="elemento" id="elemento" />

</form>

Métodos para hacer referencia

Independientemente del método utilizado para obtener la referencia a un elemento de formulario, cada elemento dispone de las siguientes propiedades útiles para el desarrollo de las aplicaciones:

·         type: indica el tipo de elemento que se trata. Para los elementos de tipo <input> (text,button, checkbox, etc.) coincide con el valor de su atributo type. Para las listas desplegables normales (elemento <select>) su valor es select-one, lo que permite diferenciarlas de las listas que permiten seleccionar varios elementos a la vez y cuyo tipo es select-multiple. Por último, en los elementos de tipo <textarea>, el valor de type es textarea.

·         form: es una referencia directa al formulario al que pertenece el elemento. Así, para acceder al formulario de un elemento, se puede utilizardocument.getElementById("id_del_elemento").form

·         name: obtiene el valor del atributo name de XHTML. Solamente se puede leer su valor, por lo que no se puede modificar.

·         value: permite leer y modificar el valor del atributo value de XHTML. 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 radiobuttonno es muy útil, como se verá más adelante

Eventos

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

·         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 XHTML (<input type="button">, <input type="submit">, <input type="image">).

·         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>). Sin embargo, el evento sólo se produce si después de realizar el cambio, el usuario pasa al siguiente campo del formulario, lo que técnicamente se conoce como que "el otro campo de formulario ha perdido el foco".

·         onfocus: evento que se produce cuando el usuario selecciona un elemento del formulario.

·         onblur: evento complementario de onfocus, ya que se produce cuando el usuario hadeseleccionado un elemento por haber seleccionado otro elemento del formulario. Técnicamente, se dice que el elemento anterior "ha perdido el foco".

 Ejemplos de Formularios

1- Digitar valores
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE> Digitar valores_Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<br/>
<br/>
<p>
Nombre:&nbsp &nbsp &nbsp &nbsp <input type="text" name="nombre" size="40" id="nombre" autofocus required>
<br/>
</FORM>

</BODY>

</HMTL>

2- Diitar cadenas de texto
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE> Cadenas de texto_Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<h1>Cadenas de texto</h1>
<TEXTAREA name="txtAreaTexto" cols="45" rows="3" id="txtAreaTexto" placeholder="Aqu&iacute; anota tus comentarios"></TEXTAREA>
<br>

</FORM>

</BODY>

</HMTL>

3- Cajas de seleccion
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE> Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<h1>Cajas de seleccion</h1>
<br>
<input type="checkbox" name="GrupoCasillas" value="Casilla1" id="chkBox1"/>Casilla1
<input type="checkbox" name="GrupoCasillas" value="Casilla2" id="chkBox2"/>Casilla2
<input type="checkbox" name="GrupoCasillas" value="Casilla3" id="chkBox3"/>Casilla3
<br>
</FORM>


</BODY>

</HMTL>

4- Botones de opciones
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE> Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<h1>Botones de opciones</h1>
<br>
Sexo:
Femenino: <input type="radio" name="radio" value="Casilla1" checked=="true"/>
Masculino: <input type="radio" name="radio" value="Casilla2" />
</FORM>

</BODY>
</HMTL>

5- Cajas de seleccion de elementos
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE>Caja de seleccion_ Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<h1>Caja de seleccion de elementos</h1>
<br>
<select name="meses" id="mes">
<option value="mes 1">Enero</option>
<option value="mes 2">Febrero</option>
<option value="mes 3">Marzo</option>
<option value="mes 4">Abril</option>
<option value="mes 5">Mayo</option>
<option value="mes 6">Junio</option>
<option value="mes 7">Julio</option>
<option value="mes 8">Agosto</option>
<option value="mes 9">Septiembre</option>
<option value="mes 10">Octubre</option>
<option value="mes 11">Noviembre</option>
<option value="mes 12">Diciembre</option>
</select>
</FORM>

</BODY>

</HMTL>

6- Cajas para seleccionar archivos
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE>Caja de seleccion_ Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">

<FORM name="frm.datos">

<h1>Caja de seleccion de archivo</h1>
<br/>
Selecciona archivo: <input type="file" name="txtArchivo" id="txtArchivo"/>
</FORM>

</BODY>

</HMTL>

7- Contorno de información 
<!DOCTYPE>
<HTML LANG="ES">
<HEAD>
<META CHARSET="UTF-8" />
<TITLE>Caja de seleccion_ Formulario </TITLE>
</HEAD>
<BODY bgcolor="Lavender">
<fieldset style="border-radius:10px; text-shadow:grey 1px 1px;">
<legend>Marco en formulario </legend>
<FORM name="frm.datos">


</FORM>
</BODY>

</HMTL>

Ejemplo de password

Código

	<!DOCTYPE>
	<HTML LANG="ES">
	<HEAD>
	<META CHARSET="UTF-8" />
	<TITLE> Formulario </TITLE>
	<script type="text/javascript" src="P2A3_validacion.js"></script>
	</HEAD>
	<BODY bgcolor="Lavender">
	<fieldset style="border-radius:10px; text-shadow:grey 1px 1px;">
	<legend>Datos Personales </legend>
	<FORM name="frm1" memethod="POST"onSubmit="return validarPasswd()"action="enviar.php">
	<br/>
	<br/>
	<p>
	Usuario:&nbsp &nbsp &nbsp &nbsp <input type="text" name="usuario" size="40" id="txtuser" size="30" autofocus required><br/><br/>
	Password:&nbsp &nbsp <input type="password" name="passwd" id="pswd" size="20"><br/><br/>
	Validar password:&nbsp &nbsp <input type="password" name="validarPassword" id="pswd2" size="20"><br/><br/>
	<input type="submit" value="enviar" >
	</FORM>
	</BODY>
	</HMTL>

Pantalla 

Datos Personales

Usuario:

Password:

Validar password: