11. Formularios

La manera general para que los lectores de nuestra p�gina se puedan comunicar con nosotros es por medio de un enlace a nuestra direcci�n de email, con lo que recibir�amos un email convencional.

Pero puede ser que lo que necesitemos sea s�lamente una respuesta concreta a unas opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo.

Se puede hacer todo esto, adem�s de otras cosas, utilizando los formularios, con los que se pueden confeccionar p�ginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de selecci�n, cajetines de introducci�n de texto y de control, etc., como vamos a ver.

Los formularios permiten que los dem�s nos env�en la informaci�n directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta informaci�n.

Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de email y pulsar un bot�n de env�o. Esos datos los podemos recibir "en bruto" en nuestro correo, con los que confeccionar�amos manualmente dicha lista de correo, sin necesitar ning�n programa para ello. Este proceso es el que vamos a comentar en este cap�tulo.

La otra posibilidad, de la que �nicamente se va a hacer esta menci�n, es que hubi�ramos instalado en nuestro servidor un programa especial para procesar esos datos y a�adirlos a la lista de correo, y que incluso pudiera devolver autom�ticamente al usuario alg�n tipo de informaci�n. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los m�s usados en Internet son el Perl y el C.

Para saber m�s sobre el CGI:

NOTA:
El tipo de formulario que se describe a continuaci�n podr� ser utilizado por la mayor�a de los navegadores, con la notable excepci�n del Explorer (incluso la versi�n 3.0), por lo que es conveniente suministrar al final del formulario, como una alternativa para estos casos, un enlace de email ordinario (ver el Cap�tulo 3)

Estructura de un formulario

La estructura general de un formulario es:
  1. Etiqueta de inicio:
    <FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
  2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.
  3. Botones de env�o y de borrado.
  4. Etiqueta de cierre </FORM>

Etiqueta de inicio

El atributo ACTION indica la acci�n que se debe efectuar y que es que los datos sean enviados por email a la direcci�n indicada. (Si hici�ramos uso del CGI, ser�a precisamente aqu� donde indicar�amos su localizaci�n en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la direcci�n de email, nada m�s pulsar el usuario el bot�n de env�o.

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

Elementos para introducir los datos

Los vamos a dividir en tres clases:
  1. Introducci�n por medio de texto
  2. Introducci�n por medio de men�s
  3. Introducci�n por medio de botones
La introducci�n de los datos se consigue por medio de la etiqueta:

<INPUT TYPE="xxx" NAME="yyy" VALUE="zzz">

En donde:
xxx es la palabra que indica el tipo de introducci�n.
yyy es el nombre que le asignamos nosotros a la variable de introducci�n del dato.
zzz es la palabra asociada a un elemento.

Todo esto, que de momento parece muy confuso, se aclarar� al ir viendo los distintos casos.

Introducci�n por medio de texto (una l�nea)

En este caso es xxx=text, es decir, INPUT TYPE="text". El atributo VALUE no procede en este caso.

Vamos a poner un ejemplo: solicitamos el apellido del usuario.

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
</FORM>

Que resulta:

Escribe tu apellido:

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el bot�n de env�o (que veremos m�s adelante), recibiremos un email suyo con el siguiente texto:

Apellido=Ruiz

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo SIZE="n�mero". Por otra parte, sea cual sea la longitud del formulario, si no se indica nada, el usuario puede introducir el n�mero de caracteres que quiera. Se puede limitar esto, incluyendo en la etiqueta el atributo MAXLENGTH="n�mero".

En el caso que hemos visto, si hubi�ramos cambiado la etiqueta correspondiente por:

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Habr�amos obtenido:

Escribe tu apellido:

(Se puede comprobar c�mo no se pueden introducir m�s de 12 caracteres).

Tambi�n se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por asteriscos. Basta con cambiar en la etiqueta INPUT TYPE="text" por INPUT TYPE="password". En el �ltimo ejemplo, si cambiamos la etiquea correspondiente por:

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">

Obtenemos:

Escribe tu apellido:

(Se puede comprobar c�mo los caracteres introducidos se representan por asteriscos)

Introducci�n por medio de texto (m�ltiples l�neas)

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un formulario de texto de m�ltiples l�neas.

Esto se consigue con la etiqueta de inicio:

<TEXTAREA NAME="yyy" ROWS="n�mero" COLS="n�mero">
(en donde no se utiliza INPUT TYPE y donde ROWS representa el n�mero de filas, y COLS el de columnas).

y la de cierre: </TEXTAREA>

Ejemplo: un formulario solicitando los comentarios del usuario:

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Introduce tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
</FORM>

Que resulta:

Introduce tus comentarios:

(El salto de l�nea del texto introducido no se efect�a autom�ticamente).

Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsado el bot�n de env�o, recibiremos un email suyo con el siguiente texto:

Comentarios=Bla bla bla...

Introducci�n por medio de men�s

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casos anteriores, escoja entre varias opciones que le presentamos nosotros, haremos uso de un formulario en forma de men�.

Se consigue con la etiqueta de inicio <SELECT NAME="yyy"> y la de cierre </SELECT>.
Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>.

Ejemplo: Pedimos al usuario que elija su color preferido:

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
�Cu�l es tu color preferido?
<BR><SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>

Que resulta:

�Cu�l es tu color preferido?

Si el usuario ha escogido, p. ej. Azul y ha pulsado el bot�n de env�o, recibiremos un email suyo con el texto: ColorPreferido=Azul.

En el ejemplo anterior, s�lo es visible en el formulario una opci�n. Si queremos que sean visibles m�ltiples opciones a la vez, a�adimos en la etiqueta los atributos MULTIPLE SIZE="n�mero", donde especificamos el n�mero de opciones visibles.

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por:

<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2">

Obtenemos:

�Cu�l es tu color preferido?

Formulario de confirmaci�n (checkbox)

Si queremos que el usuario confirme una opci�n determinada, podemos hacer uso de un formulario de confirmaci�n, o checkbox, que se consigue con la etiqueta:

<INPUT TYPE="checkbox" NAME="yyy">

Ejemplo: Solicitamos al usuario que confirme su inclusi�n en una lista de correo:

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
<INPUT TYPE="checkbox" NAME="Lista">
S�, deseo ser incluido en la lista de correo.
</FORM>

Que resulta:

S�, deseo ser incluido en la lista de correo.

Si el usuario marca este formulario y pulsa el bot�n de env�o, recibiremos un email suyo con el texto: Lista=On.

Si queremos que el formulario aparezca inicialmente como marcado (el usuario no necesitar� hacerlo), basta con a�adir el atributo CHECKED dentro de la etiqueta. En el ejemplo anterior si sustituimos la etiqueta equivalente por:

<INPUT TYPE="checkbox" NAME="Lista" CHECKED>

Obtenemos:

S�, deseo ser incluido en la lista de correo.

Botones de radio

Cuando queremos que el usuario elija una �nica opci�n entre varias, podemos hace uso de los botones de radio, que se consiguen con la etiqueta:

<INPUT TYPE="radio" NAME="yyy" VALUE="zzz">

Donde yyy es el nombre que le ponemos a la variable que se trata de elegir, y zzz es el nombre de cada una de las opciones en concreto.

Ejemplo: solicitamos al usuario que defina cu�l es su sistema operativo preferido:

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
�Cu�l es tu sistema operativo preferido?
<BR>
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="PC" CHECKED> PC
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Mac"> Mac
<INPUT TYPE="radio" NAME="SistemaOperativo" VALUE="Unix"> Unix
</FORM>

Que resulta:

�Cu�l es tu sistema operativo preferido?
PC Mac Unix

Obs�rvese el atributo opcional CHECKED que se ha a�adido en la primera etiqueta. Esa ser� la opci�n que aparece marcada por defecto.

Obs�rvese tambi�n que no es posible escoger m�s de una opci�n.

Si el usuario ha escogido la opci�n PC y pulsa el bot�n de env�o, recibiremos un email suyo con el texto: SistemaOperativo=PC.

Botones de env�o y de borrado

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el bot�n de env�o de los datos, que se consigue con la etiqueta:

<INPUT TYPE="submit" VALUE="zzz">

En donde zzz es el texto que queremos que aparezca en el bot�n.

Vamos a a�adirlo al primer ejemplo, en el que se solicitaba el apellido del usuario:

<FORM ACTION="mailto:direcci�n_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Escribe tu apellido:
<BR><INPUT TYPE="text" NAME="Apellido">
<P><INPUT TYPE="submit" VALUE="Enviar datos">
</FORM>

Que resulta:

Escribe tu apellido:

Otro bot�n interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de env�o, pues se consigue con la etiqueta:

<INPUT TYPE="reset" VALUE="zzz">

En donde zzz es el texto que queremos que aparezca en el bot�n.

Si a�adimos al ejemplo anterior la etiqueta:

<P><INPUT TYPE="reset" VALUE="Borrar datos">

resulta:

Escribe tu apellido:

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el bot�n de borrado.

Consideraciones finales

Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ning�n inconveniente en usar, dentro del mismo formulario, distintos tipos de introducci�n de datos. Al pulsar el usuario el bot�n de env�o recibir�amos en email suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el s�mbolo &.

Por ejemplo, con este formulario, con dos elementos distintos:

Escribe tu apellido:

�Cu�l es tu color preferido?

recibir�amos un email con el texto (p. ej.):
Apellido=Ruiz
ColorPreferido=Azul.

Para ampliar el tema de formularios:
Carlos' Forms Tutorial

wmbanner.gif

Ejemplo pr�ctico

Partiendo del ejemplo pr�ctico del cap�tulo anterior, mipag10.html, vamos a a�adirle un "libro de visitas". Para ello, a�adimos lo siguiente, entre las etiquetas <HR> y </BODY> situadas al final, lo siguiente:


<P><CENTER>
<H2>Libro de visitas</H2>
<P><FORM ACTION="mailto:[email protected]" METHOD="POST" ENCTYPE="TEXT/PLAIN">
Tu nombre:
<BR><INPUT TYPE="text" NAME="Nombre">
<P>Escribe tus comentarios:
<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
</TEXTAREA>
<P><INPUT TYPE="submit" VALUE="Enviar datos">
<INPUT TYPE="reset" VALUE="Borrar datos">
</FORM>
<P>
<HR>

(Cada uno puede poner en mailto:[email protected] su propia direcci�n de email)

Guardamos este fichero como mipag11.html y lo cargamos en el navegador para verlo.
Resultado.


WebMaestro: http://www.wmaestro.com/webmaestro - � Francisco Arocena
bargold1.gif

Cap�tulo anteriorP�gina inicialCap�tulo siguiente