Formularios

Un formulario HTML sirve como principal punto de interaccin con el usuario: mediante ellas, podemos hacer posible la interaccin de nuestra pgina Web para con el usuario que visita nuestro sitio.

De esta manera, se puede entender un formulario no slo como un ingreso de datos del usuario, tambin la bsqueda en Google es un formulario. Cuando intentamos ingresar a nuestro mail online, el espacio para ingresar nuestro nombre de usuario y nuestra contrasea es tambin un formulario. Cuando queremos participar en un foro y queremos mandar nuestro mensaje, el espacio hecho para tal efecto es tambin un formulario. Tal como ya fue dicho, el formulario es el principal elemento para que de esta manera, nuestro sitio se pueda convertir en una Web 2.0.

Una Web 2.0, definida como primera vez en el ao 2004 por Tim OReilly se relaciona con aquel sitio que se basa principalmente en la generacin de contenidos por parte de los usuarios, tales como blogs, redes sociales o wikis. Ejemplos de estos sitios sobran: twitter, facebook, wordpress, fotolog, flickr o wikipedia son los ejemplos ms grandes y exitosos.

Escribiendo el HTML

Un formulario se declara entre estos dos tags:

<form> <p>Aqu&iacute; ir&aacute;n todos nuestros elementos</p> </form>

Sin embargo, este formulario no hace nada. Para que nuestro formulario haga algo, debemos incluir algunos atributos, tales como la accin a ejecutarse cuando aceptemos el formulario. Sin embargo, antes de poder crear un formulario, veamos algunas de las distintas opciones que tenemos para crearlo.

Elemento input

Uno de los principales elementos de un formulario, es el elemento <input>, el cual puede ser muchas cosas, dependiendo de su atributo. Veamos cules son las opciones:
TEXT Un cuadro de texto PASSWORD Un campo para ingresar contraseas CHECKBOX Una seleccin mltiple RADIO Una seleccin nica entre varias opciones SUBMIT Un botn para enviar el formulario RESET Un botn para limpiar el formulario FILE Un campo para subida de archivos HIDDEN Un campo oculto IMAGE Una imagen que enva el formulario BUTTON Un botn que no hace nada (Frecuentemente acompaado de Javascript)

Un ejemplo de todos estos botones se puede encontrar en: http://unreal4u.com/diplomado/ejemplo7.php

Otros elementos de inters

Existen algunos otros elementos de inters para la creacin de un formulario. Estos son el rea de texto y el select box: una seleccin de opciones (de las cuales slo uno se puede elegir). Una diferencia entre el textarea y el input text es que mientras que el input text no acepta retorno de carro, el textarea s lo permite. De esta manera, un texto cuya representacin es ms de una lnea, se puede guardar o representar como tal. A su vez, el select box difiere del input radio debido a que necesariamente se tiene que elegir una opcin, adems de hacerlo en menor superficie que la primera.

Un ejemplo de estos dos elementos, sumados a los anteriores, se puede encontrar en: http://unreal4u.com/diplomado/ejemplo8.php

A todos los elementos arriba nombrados se les puede aplicar estilo, pudiendo lograr resultados realmente sorprendentes en el rea grfica. Por otro lado, combinando los formularios con Javascript, se puede lograr an mejor usabilidad a su vez que rapidez y asistencia en el llenado de las mismas. Para ver ejemplos de uso intensivo de Javascript y CSS en un formulario, visitar el siguiente link:
http://www.webcredible.co.uk/user-friendly-resources/dom-scripting/form-usability-example.shtml

Uso de mtodos

En la actualidad, existen dos formas de generar un formulario que se definen a su vez en dos mtodos: el mtodo GET y el POST.

Mtodo GET

La diferenciacin entre ambas es que el objeto GET ser siempre pblicamente abierto mientras que el mtodo POST no podr ser visible. Veamos estos dos ejemplos:
<form name="formulario1" action="/diplomado/ejemplo9.php" method="get"> <input type="text" name="el_texto" value="" /><br /> <input type="submit" value="Aceptar" /> </form>

Cuando enviamos el formulario, la salida ser:

Tal como se puede apreciar en el ejemplo, la cadena ingresada (en este caso, hello world) se puede ver a vista simple. Esto tiene la ventaja de ser un programa sumamente fcil de programar, pero tambin facilita muchsimo el incentivo para el mal uso del mismo.

Es as como no se debera pasar informacin sensible a travs de este mtodo, tales como contraseas y otros datos sensibles. Supongamos que tengamos el siguiente formulario:

<form name="formu" action="ejemplo12.php" method="get"> Usuario: <input type="text" name="usuario" value="" /><br /> Pass: <input type="password" name="contrasenja" value="" /><br /> <input type="submit" value="Ingresar" /> </form>

Cuya salida una vez que ingresemos nuestro nombre de usuario y contrasea es la siguiente:

Tal como se puede apreciar, el traspaso de informacin sensible es inconveniente. Como dato adicional (que slo ensea la prctica), una variable en un mtodo GET no puede contener ms de 255 caracteres.

Mtodo POST

Por suerte para nosotros, existe otro mtodo: el mtodo POST:

<form name="formulario1" action="/diplomado/ejemplo10.php" method="post"> <input type="text" name="el_texto" value="" /><br /> <input type="submit" value="Aceptar" /> </form>

Este mtodo es mucho ms seguro pero un poco ms complicado de manejar debido a que en ninguna parte podemos ver las variables. Lo nico que se puede hacer con este tipo de variables es imaginarlas, guindonos por el nombre que le asignemos al formulario y a nuestros inputs, textareas o selects. La salida en pantalla de este tipo de formulario una vez que se haya enviado el formulario es el siguiente:

Tal como se puede apreciar en la imagen, despus de haber enviado el formulario no existe ningn signo que indique que hayamos enviado un formulario, sin embargo, los datos s se enviaron, y es posible rescatar y trabajarlas con PHP. El mtodo POST a su vez, no tiene la limitacin de 255 caracteres que tiene el mtodo GET, por lo que es posible enviar una gran cantidad de informacin de una sola vez.

Combinando varios formularios en una sola pgina

En una pgina puede (o no) existir ms de un formulario. Puede darse el caso por ejemplo que queramos en una sola pgina una bsqueda y a su vez, permitir la entrada a nuestros usuarios:

Pero cmo se diferencian estos dos formularios? La respuesta a esta interrogante tiene su respuesta en la accin o al nombre del formulario a ejecutarse, que no es otra cosa que la pgina a la cual mandaremos nuestros datos del formulario o bien, en el nombre que le asignemos al formulario.

El siguiente ejemplo permite mandar ya sea el nombre o la edad, pero no ambas a la vez:

<form name="formu1" action="ejemplo11.php" method="get"> Ingrese su nombre: <input type="text" name="nombre" value="" /><br /> <input type="submit" value="Aceptar" /> </form>

<form name="formu2" action="ejemplo11.php" method="get"> Ingrese su edad: <input type="text" name="edad" value="" /><br /> <input type="submit" value="Ingresar" /> </form>

Para ver este formulario en accin y evaluar las distintas opciones que tiene, por favor visitar: http://unreal4u.com/diplomado/ejemplo11.php

Recursos utilizados
Formularios http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html Web 2.0 http://es.wikipedia.org/wiki/Web_2.0 Dos formularios en una pgina http://www.maxservice.cl/