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.

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

<html>

<head>
Otras etiquetas...
</head>

En esta región del
<body> documento
Contenido de la página... HTML es que
</body> debemos insertar
el formulario.
</html>

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.

 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

 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
history
window.document
document

document.forms[0]

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:

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

 document.forms[0].texto;

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

<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.

<input type="text" name="texto" id="campoTexto"
size="20" value="Texto" />

document.forms[0].texto.value
document.getElementById("campoTexto").value Texto

 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.

 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

Formularios y Validaciones

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Formularios y Validaciones (20)

Último (20)

Formularios y Validaciones