Formularios y Validaciones

Didier Fabián Granados Muñoz

Formularios Web y Validaciones – Parte I

Septiembre 5 de 2009

Los formularios son una

utilidad necesaria para que

los documentos descritos

con HTML dispongan de un

medio para que el lector o

visitante pueda remitir

información personalizada al

servidor, creándose, de esta

forma, un sistema completo

de interacción con el mismo.

El lenguaje HTML dispone de directivas que permiten crear

formularios, estos son un conjunto de objetos dinámicos que

posibilitan al lector interactuar con el documento descrito en base

a HTML. Estos objetos son:

Cajas de texto

Contraseñas

Campos ocultos

Casillas de verificación

Botones de selección

Botones

Imágenes

Áreas de texto

Listas

Todos estos objetos (a excepción de los ocultos) permiten

que el lector realice acciones sobre ellos:

Introducir o cambiar datos.

Seleccionar opciones.

Pulsar botones.

Y posteriormente remitir el conjunto de información que

representa los datos introducidos y las opciones

seleccionadas a una dirección URL determinada que puede

ser una dirección de correo, un programa que realice un

tratamiento con ella, etc.

Los formularios se aplican a cualquier concepto de

comunicación entre un emisor y un receptor.

Se puede crear un formulario para introducir simples

mensajes y enviarlos por correo, realizar pedidos, rellenar

fichas de admisión, solicitudes de ingreso, suscripciones,

inscripciones, votaciones, envío de anuncios, rellenar

currículos, etc.

Un ejemplo cotidiano se puede encontrar en un motor de

búsqueda, como Yahoo, Google, Altavista, Bing, etc., donde

el usuario introduce lo que quiere buscar, selecciona dónde

quiere buscar y cómo lo quiere buscar. Esta información es

utilizada por el motor de búsqueda para que un programa

la analice y, en consecuencia, realice la búsqueda en sus

bases de datos.

<html>

<head>

Otras etiquetas...

</head>

<body>

Contenido de la página...

</body>

</html>

Debemos recordar la estructura básica de un documento HTML.

En esta región del documentoHTML es que debemos insertar el formulario.

El objeto FORM

El objeto <form> permite la creación de un formulario

dentro de una página Web. Este objeto es un objeto

contenedor, puesto que contendrá el resto de los objetos

de que se componga el formulario. De igual manera, el objeto <form> define el formato de transmisión de los

datos introducidos y el lugar de destino.

Una página web puede contener múltiples formularios (directivas <form> … </form>, aunque no es lo más

recomendado), con acciones diferentes. Sin embargo, no

pueden existir formularios dentro de otros formularios ni

cruzarse las directivas.

Sintaxis básica

La sintaxis básica del objeto <form> es la siguiente:

<form action="acción" method="MétodoTransmisión">

Aquí van los objetos del Formulario

</form>

Sintaxis básica

La cláusula action contiene la URL o dirección de destino,

que puede ser una dirección de correo electrónico, o bien

un programa en el servidor que gestionará los datos que se

envían. Esta etiqueta es requerida, aunque si no se

especifica, tomará por defecto URL de la página actual.

La cláusula method indica el método, formato o protocolo

de transmisión de los datos del formulario. Su valor puede

ser uno de los siguientes:

GET

POST

Cláusula "method“ o método de envío de datos

GET: Es el método por defecto. Los datos se transmiten

incluidos en la URL de petición en forma de variable de

entorno y con el siguiente formato:

campo=valor[&campo=valor ... ]

No se pueden transmitir más de 255 caracteres.

Cláusula "method“ o método de envío de datos

POST: Es el formato que utiliza la aplicación del servidor,

los datos se transmiten en el cuerpo del protocolo y la

aplicación los recibe en la entrada estándar. En la cadena de

caracteres se define el formato de los datos.

Tiene una serie de atributos especiales MIME (Multipurpose

Internet Mail Extensions). En principio esta codificación es "application/x-www-form-urlencoded".

Permite la transmisión de grandes cantidades de datos. Por

lo tanto, es posible enviar archivos mediante un formulario

cuyo método sea POST, sin olvidar otra cláusula llamada

enctype, que indica qué tipo de dato será enviado según el

inciso anterior.

Campos o Elementos

Un campo o elemento, es una entidad independiente de

información dentro del conjunto del formulario.

Dicho en otros términos, los campos o elementos son cada

uno de los objetos en un formulario que representa la

información introducida, editada o seleccionada por el

usuario.

Existe una variedad de tipos de campos, dependiendo del

método de introducción de los datos, que en su mayoría se

hace desde el teclado.

Campos o Elementos

Obviamente, según las características de un determinado tipo de campo (dado por el atributo type) utilizará ciertas cláusulas de las citadas

anteriormente. Por ello, a continuación se tratan cada uno de los tipos y

sus respectivas cláusulas,

text

password

hidden

checkbox

radio

button

submit

reset

file

image

Elemento TEXTAREA

En ocasiones es necesario la introducción de un texto largo,

con múltiples líneas. Por ello, la caja de texto se queda

limitada y es necesario recurrir a otro tipo de campo

especial, llamado área de texto. Este campo se crea con una directiva nueva, llamada textarea, y cuya sintaxis básica

es la siguiente:

<textarea name="nombre" [cols="columnas"]

[rows="filas"] [align="alineación"]>

Texto Inicial, no es necesario

</textarea>

Elemento SELECT (Listas)

Una lista es un conjunto de opciones que el usuario puede elegir

con un click de ratón. A diferencia de una casilla de verificación o

un botón de selección, las listas agrupan las opciones en un solo

cuadro.

Existen dos tipos de listas:

Listas normales

Listas desplegables.

Las primeras muestran un recuadro con la lista de opciones en su

interior. Las segundas enseñan una especie de caja de texto con

un botón a la derecha que, al hacer click sobre él, se despliega la

lista.

Elemento SELECT (Listas)

Para esto, hay que utilizar dos directivas nuevas: <select>

y <option>, cuya sintaxis básica es la siguiente:

<select name="NombreLista" [size="valor"]

[align="alineación"] [width="valor"] [height="valor"]

[multiple="multiple"]>

<option [selected="selected"]>Texto de la opción</option>

...

</select>

Ya sabemos para qué sirve un formulario…

Ya sabemos que cada campo se comporta de manera similar o

diferente según los atributos especificados y sus valores.

Ya sabemos que podemos enviar datos al servidor y las diferencias

entre GET y POST…

Pero… ¿Cómo podemos garantizar un buen manejo del

formulario?

No meter textos muy largos…

Que un campo específico sólo reciba números… o sólo letras…

Que no me pueda pasar de cierto valor…

Que se pueda deshabilitar o habilitar un campo, según sea el

caso…

Que el formulario no envíe si alguna de las condiciones

anteriores no se cumple…

Es esencialmente una interfaz de programación de

aplicaciones Web que proporciona un conjunto

estándar de objetos para representar documentos

HTML y XML, un modelo estándar sobre cómo

pueden combinarse dichos objetos, y una interfaz

estándar para acceder a ellos y manipularlos.

A través del DOM, los programas pueden acceder y

modificar el contenido, estructura y estilo de los

documentos HTML y XML, que es para lo que se

diseñó principalmente.

Primera vez: Navegador Netscape 2.0

Modelo básico o el DOM de Nivel 0.

IE 3.0 fue el primer navegador de Microsoft que utilizó

este nivel.

Netscape 3.0 empezó a utilizar rollovers.

Microsoft empezó a usar rollovers en IE 4.0.

Netscape 4.0 agregó la capacidad de detectar eventos

ocurridos en el ratón y el teclado.

En IE 4.0 todos los elementos de una página web se

empezaron a considerar objetos computacionales con la

capacidad de ser modificados.

Octubre de 1998: DOM Nivel 1.

Por diferencias en estos navegadores.

Se consideraron las características y manipulación de

todos los elementos existentes en los archivos HTML y

XML.

Noviembre de 2000: DOM Nivel 2.

Se incluyó la manipulación de eventos en el navegador,

la capacidad de interacción con CSS, y la manipulación

de partes del texto en las páginas de la web.

Abril de 2004: DOM Nivel 3.

Utiliza la DTD (definición del tipo de documento) y la

validación de documentos.

http://upload.wikimedia.org/wikipedia/commons/7/7b/DocumentObjectModelES.svg

Guerra entre navegadores.

Netscape Navigator (y/o Mozilla Firefox) vs Internet

Explorer…

Navegadores de otras compañías...

Crean graves problemas para los programadores de

páginas web.

Los objetos no se comportan de la misma forma, lo que

obliga con frecuencia a programar las páginas en más

de una versión, una para el Netscape, o Firefox, otra para

Internet Explorer, otra para Safari, Opera, etc.

En suma, no todas las versiones de un mismo navegador

se comportan igual.

El W3C, el consorcio encargado de definir los estándares de

la web, decidió crear un modelo de objetos único, el DOM,

para que todos los fabricantes pudieran adoptarlo,

facilitando la compatibilidad plena entre ellos.

No obstante, Microsoft ha añadido su propia extensión al

DOM, creando problemas de interoperabilidad para los

navegadores web.

Esto cambiará sólo si nuevos navegadores que respeten los

estándares ganan una cuota de mercado significativa en la

web, de forma que el uso de extensiones no estándares se

convierta en un problema comercial para los autores de los

sitios web que las usen.

DOM según la W3C

http://www.w3.org/DOM/

DOM en Mozilla

http://www.mozilla.org/docs/dom/domref/

Especificación DOM Nivel 1

http://html.conclase.net/w3c/dom1-es/cover.html

http://www.w3.org/DOM/

http://www.mozilla.org/docs/dom/domref/




Los formularios de una determinada página web forman una

colección de objetos: forms. Esta colección está incluida en el

objeto document, por lo que podemos referirnos a un determinado

formulario de tres formas:

1. Por su índice en la colección forms, es decir, el índice que indica su

posición en la página. En este caso, document.forms[0], nombraría el

primer formulario de la página.

2. Indizado por su nombre (dado por el atributo name de la directiva

<form>). Así, document.forms['forma1'] se referirá al formulario

iniciado por <form name="forma1" ...>

3. Nombrándolo directamente por su identificador único, dado por el

atributo id de la directiva <form>. De este modo, cuando se dice

document.FormularioPropio, se refiere al formulario identificado por

<form name="forma2" id="FormularioPropio" ...>.

window

window.history

window.document

document.forms[0]

document

history

http://upload.wikimedia.org/wikipedia/commons/7/7b/DocumentObjectModelES.svg

Los elementos

Dependiendo de cada objeto form depende una colección de

objetos: element, que contiene los objetos que representan cada

uno de los elementos que contiene el formulario.

Los objetos de estas colecciones se referencian de igual forma que

los formularios, es decir:

A través de un índice que indica su posición en el formulario.

Mediante la etiqueta name o el atributo id.

Pero siempre se ha de tener en cuenta que cada formulario

contiene una colección de elementos y que los mismos se

referencias o indizan de acuerdo a la mismas.

Los elementos

Así:

document.forms[2].element[3], representa el cuarto elemento del

tercer formulario de la página.

document.forms[´forma1'].EntradaTexto representa un elemento

con el atributo id="EntradaTexto" en el formulario <form

name="forma1" ...>.

Los objetos form como los objetos element tienen una serie de

propiedades que los definen y que, así mismo, establezcan su

comportamiento.

Algunas de esas propiedades serán de lectura y escritura y los

procedimientos JavaScript podrán leer su valor o cambiarlo,

mientras que en otros casos solo podrán leer el valor sin posibilidad

de actualizarlo.

Los objetos responderán a una serie de métodos que permitirán

actuar sobre los mismos y podrán responder a unos eventos que

permitirán definir el comportamiento de los mismos frente a

actuaciones de entorno y del usuario.

Es un lenguaje de programación interpretado, es decir, que no

requiere compilación.

Es utilizado principalmente en páginas web.

No confundir, no tiene nada que ver con Java… pero tiene una

sintaxis semejante, aunque también se asemeja al lenguaje C.

Todos los navegadores modernos interpretan el código JavaScript

integrado dentro de las páginas web. Por tanto, es una tecnología

del lado del cliente.

Para interactuar con una página web se provee al lenguaje

JavaScript de una implementación del DOM.

Inicialmente lo llamaron Mocha y más tarde LiveScript pero fue

rebautizado como JavaScript en un anuncio conjunto entre Sun

Microsystems y Netscape, el 4 de diciembre de 1995.

En 1997 los autores propusieron JavaScript para que fuera

adoptado como estándar de la European Computer Manufacturers'

Association ECMA, que a pesar de su nombre no es europeo sino

internacional, con sede en Ginebra. En junio de 1997 fue adoptado

como un estándar ECMA, con el nombre de ECMAScript. Poco

después también lo fue como un estándar ISO.

JScript es la implementación de ECMAScript de Microsoft, muy

similar al JavaScript de Netscape, pero con ciertas diferencias en

el modelo de objetos del navegador que hacen a ambas

versiones con frecuencia incompatibles.

Para evitar estas incompatibilidades, la W3C (World Wide Web

Consortium) diseñó el estándar DOM…

Lo incorporan los navegadores Konqueror, las versiones 6 de

Internet Explorer (en teoría) y Netscape Navigator, Opera 7, y

Mozilla desde su primera versión.

Referencia

Javascript se puede incluir en cualquier documento y es

compatible con cualquier sistema operativo, o todo aquel

que termine traduciéndose en HTML en el navegador del

cliente.

Bastará con escribir en el documento HTML:

<script type="text/javascript" src="[URL]">

</script>

Referencia

También es posible incluir código directamente en el

documento entre los elementos <script> y </script>,

aunque no se recomienda por ser una práctica invasiva:

<script type="text/javascript">



</script>

Los objetos responderán a una serie de métodos que permitirán

actuar sobre los mismos y podrán responder a unos eventos que

permitirán definir el comportamiento de los mismos frente a

actuaciones de entorno y del usuario:

Propiedades como value, size, selected, checked...

Métodos como click, scrollIntoView, focus, ...

Manejadores de eventos como onClick, onChange,

onMouseOver...

A los que se añadirán las propiedades y métodos propios de las

colecciones: add, remove, length...

No importa su tipo.

Se puede acceder a ellos por su nombre:

O de manera más global, por su id, ya que este es único en el

documento HTML:

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

document.forms[0].texto;

<input type="text" id="campoTexto" />

document.getElementById("texto");

Manejador Descripción

onmouseover Cuando se pone el cursor sobre el elemento.

onmouseout Cuando se quita el cursor del elemento.

onfocus Cuando el cursor está dentro de un campo o lo mantiene activo.

onblur Cuando el cursor sale del campo o deja de seleccionarlo.

onchange Cuando hay algún cambio en el valor del campo.

onmousemove Cuando el mouse se está moviendo sobre el elemento.

onsubmit Cuando se envía un formulario.

onkeypress Cuando se presiona una tecla.

onkeyup Cuando una tecla deja de ser presionada.

onkeydown Cuando la tecla está siendo presionada.

onload Cuando carga la página.

onclick Cuando se hace clic sobre el objeto.

ondblclick Cuando se hace doble clic sobre el objeto.

La propiedad value es la más utilizada en su manejo, tanto para leer

el valor en los mismos contenido o actualizarle dinámicamente.

Se ha de tener en cuenta que el valor obtenido a partir de la

propiedad value es un string y su conversión a valor numérico, de

ser necesaria, se ha de realizar llamando al método parseInt() de

JavaScript, u otro similar.

<input type="text" name="texto" id="campoTexto"

size="20" value="Texto" />

document.forms[0].texto.value

document.getElementById("campoTexto").value Texto

La validación del contenido de los campos de texto y contraseña se

puede realizar en tres niveles y su correcto uso facilitará en gran

manera la utilización de los formularios web y aumentará la eficacia

de los mismos. Las tres formas de validación son:

A nivel de entrada

Capturando las teclas pulsadas por el usuario.

A nivel de salida

Cuando el usuario abandona el campo (pierde el foco) por

activar otro campo.

A nivel de envío

Antes de proceder a la remisión de contenidos al receptor de los

datos del formulario.

Ver ejemplos 1 y 2.

Al igual que el resto de controles de los formularios es posible

referirse a las mismas de dos formas:

1. A través de la colección elements:

document.forms[0].elements[1].checked = true;

2. O con un nombre propio establecido con el atributo name de la

directiva input:

document.forms[0].elCheckbox.checked = true;

En cualquier caso, el manejo de estos controles se reduce al manejo

de la propiedad checked, la cual contiene un valor true o false

dependiendo de si la casilla está activada o apagada. Esta

propiedad es de lectura y escritura, con lo que es posible cambiar el

estado del control de forma dinámica.

Ver ejemplo 3.

Los botones de radio son tratados como una colección cuando

tienen el mismo nombre.

Es posible referirse a ellos de las siguientes dos formas:

1. A través de la colección elements:

document.forms[0].elements[1][2].checked = true;

2. O con un nombre propio establecido con el atributo name de la

directiva input:

document.forms[0].elRadio[2].checked = true;

Aquí también existe el manejo de la propiedad checked, la cual

contiene un valor true o false dependiendo de si el botón está

activado o apagado, pero sólo un botón del grupo puede tener

dicha característica en un tiempo determinado.

Ver ejemplo 4.

Cada lista no vacía de un formulario tiene una colección de

opciones, llamada options, que identifica a cada uno de los valores

dispuestos en la misma, y cada uno de los elementos de ésta

colección disponen de una propiedad que es reflejo del texto y/o valor que esta en la directiva <option>.

Si el formulario tiene por nombre forma, y la lista se llama lista,

document.forma.lista.options[0].text identifica el texto que tiene

la primera opción de dicha lista.

La propiedad selectedIndex de las listas permite conocer cual es

elemento seleccionado en cada momento, esta propiedad toma el

valor, entre 0 y document.forma.lista.options.length - 1, que nos

servirá como índice para trabajar con la colección options.

Ver ejemplo 5.

La principal diferencia con las listas de selección única radica en el

hecho de que la propiedad selectedIndex de la lista no es muy

utilizable, ya que solo retornaría el índice del primer valor

seleccionado.

Si se quiere conocer los índices de todas las opciones seleccionadas

será necesario recorrer la colección options (de manera similar a los

botones de radio, solo que en este caso sí podemos tener más de

una opción a la vez) y comprobar uno por uno su estado

consultando la propiedad selected.

Ver ejemplo 6.

En los formularios puede existir un botón que permite el envio de

los contenidos del mismo al destino fijado en el atributo action de la directiva <form>.

Este botón es un campo input del tipo submit.

Generalmente su valor es "Enviar“.

La pulsación de este botón produce el envío del formulario, y al

mismo tiempo se produce un evento onsubmit, que puede ser

tratado con un manejador de evento colocado en la directiva <form>.

Las expresiones JavaScript colocadas en el manejador del evento

onsubmit son ejecutadas antes de proceder al envío. Si el resultado

de dichas expresiones, como el valor retornado por una función, es

true, el envío se produce sin más, pero si ese valor retornado es

false, el envío se cancela.

Ver ejemplo 7.

La verificación de los datos introducidos por el usuario en el lado del

cliente, en la propia página HTML en la que figura el formulario tiene

importantes ventajas:

Se disminuye el trafico de la red, ya que los errores no significan la

transmisión de información a través de la misma.

Al poder validar campo a campo el usuario puede ver la

consecuencia de sus acciones instantáneamente y la validación se

hace más ágil

El servidor es descargado de ciertos trabajos, lo cual en servidores

con gran carga de atención a muchos clientes puede ser de gran

interés.

La validación puede tener en cuenta el entorno del cliente.

Este proceso tiene algunas desventajas que es necesario tener muy en

cuenta:

Si la validación implica una gran cantidad de código, la transmisión

de la página puede hacerse difícil. Puede pensarse en la utilización

de ficheros de código (*.js) si el mismo es compartido por varios

formularios.

No es posible el dialogo con bases de datos, ficheros y entorno del

servidor.

Por lo tanto una solución de compromiso en la que se considera

validaciones elementales puede hacerse con scripts en la propia página

para descargar el trafico de la red y el trabajo del servidor.

HTML - Formularios: Diálogo con el usuario

http://www.infor.uva.es/~jmrr/2007/TGP/DOC/TGP7DOC

Formulario.htm

http://www.infor.uva.es/~jmrr/2007/TGP/DOC/TGP7DOCFormulario.htm

http://www.infor.uva.es/~jmrr/2007/TGP/DOC/TGP7DOCFormulario.htm

Formularios y Validaciones

Technology

Transcript of Formularios y Validaciones