Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones

Didier Fabián Granados Muñoz

Sesión No. 3 – Formularios y Validaciones
Agosto 19 de 2009

Comando Descripción

GET Solicita el recurso ubicado en la URL especificada y
envía datos en la misma.
HEAD Solicita el encabezado del recurso ubicado en la
URL especificada.
POST Envía datos al programa ubicado en la URL
especificada, generalmente mediante formularios.
PUT Envía datos a la URL especificada.
DELETE Borra el recurso ubicado en la URL especificada.

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.

 Un buen número de opciones…

 Cajas de texto
 Contraseñas
 Campos ocultos
 Casillas de verificación
 Botones de selección
 Botones
 Imágenes
 Áreas de texto
 Listas

Y ésta es la estructura básica de un documento HTML…

<html>

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

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

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

Aquí van los objetos del Formulario

</form>

Elemento TEXTAREA

<textarea name="nombre" [cols="columnas"]
[rows="filas"] [align="alineación"]>
Texto Inicial, no es necesario
</textarea>

Elemento SELECT (Listas)

<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

Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones

Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones

Último

Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones