domingo, 21 de septiembre de 2008

Qué son los Formularios?

Qué son los formularios?

Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía email al vendedor en forma encriptada.

Cómo los definimos?
Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: FORM, INPUT, SELECT, OPTION y TEXTAREA. Estas etiquetas, junto a un número de modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.



Etiqueta FORM
Todo formulario debe estar encerrado entre el par de etiquetas FORM y /FORM, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas BODY y /BODY. Esta etiqueta FORM presenta tres atributos posibles:


Comando Descripción
ACTION: el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.
METHOD: puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.


Etiqueta INPUT

La etiqueta INPUT es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.


Etiqueta SELECT

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.


Etiqueta OPTION

Con esta etiqueta definimos cada elemento de las listas designadas con el par SELECT y /SELECT .

ETIQUETA TEXTAREA
Este par de etiquetas nos permiten definir un área de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.



Radio Buttons y Check Boxes



Los Radio Buttons le permiten al usuario seleccionar una entre varias opciones. En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.
El código es el siguiente:

FORM< type = " radio " name = " equipos " value = " "> < / FORM >

Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:


FROM
< type = " radio " name = " equipos " value = " cuervo "> San Lorenzo<>
< type = " radio " name = " equipos " value = " gallina "> River Plate<>
< type = " radio " name = " equipos " value = " bostero "> Boca Juniors
< / FORM >
ver ejemplo: Nota: si no se ve el ejemplo traten de hacerlo en el programa.

San Lorenzo
River Plate
Boca Juniors


El NAME es el mismo para los tres Radio Buttons, pues son tres opciones para el mismo campo NAME="equipos". En este caso el VALUE ya está definido, solo debemos esperar la selección del usuario, por ejemplo si marcase la primera se procesaría la siguiente información: equipos=cuervo. Con el parámetro CHECKED le indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.


Check Boxes



La construcción de Check Boxes es bastante similar:
A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor para el parámetro VALUE, y cambian el valor de NAME. Por ejemplo:


FROM

< type = " checkbox " name = " cuervo " value = " YES ">San Lorenzo<>

< type = " checkbox " name = " gallina " value = " YES "> River PLate<>

< type = " checkbox " name = " bostero " value = " YES "> Boca Juniors<> < type = " checkbox " name = " rojo " value = " YES "> Independiente

< / FORM >

si bien, algunas opciones están marcadas por defecto, el usuario es capaz de desmarcarlas y marcar otras. Los datos serán recolectados de la siguiente manera:


gallina=YES rojo=YES
(si es que el usuario no modifica las opciones por defecto... incluso pueden elegir ninguna, es decir, dejar todas desmarcadas, entonces no habrá ningún valor procesado). Ahora bien, supongamos que quisiéramos hacer tres preguntas con opciones acerca de un mismo tema, ¿como lo haríamos?, muy simple, lo único que debemos recordar es que no puede haber NAMES duplicados en un mismo formulario, por tanto el formulario tendría esta pinta:

Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda "Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la información procesada será entonces:
noriginal?..SL=YESnumerosa?..BJ=YESfiestera?..SL=YES


Listas Desplegadas


El valor del parámetro SIZE indica exactamente cuántos elementos desplegar simultáneamente. Si el valor del SIZE es menor al número total de elementos de la lista, automáticamente aparecerá un barra de desplazamiento sobre el lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:


FROM

< name = " equipos " size =" 3">

< value = " cuervo ">San Lorenzo< / OPTION >

< value = " gallina "> River Plate< / OPTION >

< value = " bostero ">Boca Juniors< / OPTION >

< value = " rojo ">Independiente< / OPTION >

< value = " academia ">Racing Club < / SELECT >

< / FORM >

El ejemplo es: