Los formularios son posiblemente la herramineta 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.
Este tema a diferencia de los anteriores es bastante más complejo y oscuro, aparecerán
terminos como CGI scripts, Perl o bien lenguajes de programación como C, que seguramente
nos desalentarán al principio, pero que con el tiempo asumiremos como familiares. La idea
de esta sintética guía de formularios es brindar al newbie o novato un
pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio
web.
¿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.
ENCTYPE
este atributo está reservado para que la
información viaje en forma encriptada a través de Internet.
Los dos primeros atributos de la tabla son de uso obligatorio
para cualquier formulario que generemos, ya que establecen dónde enviar la información
y cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es
realmente importante.
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 <INPUT> 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 area de dimensiones
arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar
texto.
¿Cómo se ven?
Abrimos nuestro editor de texto preferido y creamos el siguiente
archivo html:
Como dijimos anteriormente todo formulario debe comenzar
con la etiqueta <FORM> y finalizar con </FORM>. El
parámetro ACTION define qué es lo que debemos hacer con la información
obtenida, en este caso le indicamos al navegador que nos envié los datos
a nuestra dirección de correo electrónico (en el ejemplo la mandan a mundo21).
La mayoría de los formularios en Internet realizan esta tarea, es decir,
recolectan información del usuario y la envían por correo electrónico hacia
algún destino. Para realizar esta tarea existen dos formas de hacerlo, una es
la utilizada anteriormente, y la otra es hacer uso de algún script o guión CGI
(Comon Gateway Interface) que procesa los datos y los reenvía hacia donde le
indicamos. Un script CGI es un pequeño programa escrito en general en
lenguaje PERL o C (muy populares en ambientes Unix) alojado
en los servidores web que facilitan el intercambio y la transferencia de información
entre el servidor y el cliente.
¿Cuál es la diferencia entre ambos métodos?, el utilizado en nuestro ejemplo es más
sencillo y no utiliza ningún script, pero a su vez es menos eficaz, ya que en la mayoría
de los casos no funcionará. Mientras que el segundo, si bien un poco más complicado, nos
asegura casi un 100% de efectividad y una gran variedad de opciones para hacerlo, pues
existen miles de scripts para diferentes tipos de formularios. Si quisiéramos utilizar un
script CGI, es necesario averiguar si el servidor web que aloja nuestro sitio posee
un directorio con scripts cgi, comúnmente conocidos como /cgi-bin (pues aloja binarios).
En el caso afirmativo, solo debemos conversar con personal entendido del servidor para
conocer como debemos configurar nuestro formulario, y en caso contrario, no debemos perder
las esperanzas pues existen miles de scripts gratuítos online en diversos servidores
alrededor del mundo esperando ser utilizados.
Supongamos, esto es solo un ejemplo, que nuestro servidor
web o ISP (Internet Service Provider o Proveedor de Internet) cuenta con un
script CGI para manejar formularios de correo electrónico, así sería la configuración
del mismo en nuestra página:
<FORM ACTION="/cgi-bin/mailto.pl" METHOD=POST>
<!-- utilizamos el script mailto.pl (termina con extensión
.pl porque está escrito en lenguaje PERL, si estuviese en C terminaría en .c)
alojado en el directorio /cgi-bin de nuestro servidor. -->
<!-- estos hidden fields (campos escondidos) pueden ser
necesarios para algunos scripts, lo que hacen es comunicar cierta información
al servidor acerca de cómo manipular los datos manteniendose ocultos a la vista
de los usuarios.En este caso le indicamos la dirección de email a dónde enviar
los datos y hacia qué página ir después. -->
<!-- los campos a utilizar deben ser aceptados por el
script, es decir el script esta diseñado para manejar cierto número y tipo de
variables, es por eso que debemos configurar nuestro formulario acorde al script
o guión que seleccionemos. Esto puede parecer toda una odisea pero es más simple
de lo que se piensa. -->
</FORM>
Para ver que pinta tiene un script del tipo utilizado en
el ejemplo anterior, escrito en PERL, pueden observar el codigo fuente del archivo
mailto.pl.
Como dijimos arriba, si por alguna razón nuestro proveedor
de Internet o servidor web donde alojamos nuestro sitio no posee scripts CGI,
no debemos bajar los brazos, aún nos queda una posibilidad: utilizar guiones
gratuítos online. Existen muchas empresas que ofrecen este servicio y además
por algunos billetes nos pueden crear o generar un script a medida. En las siguientes
direcciones se pueden obtener muy buenos scripts gratis con todas las instrucciones
correspondientes:
Para los más osados y valientes, aún existe una tercera posibilidad:
crear nuestros propios scripts. Si nuestro proveedor o servidor web nos permite
el acceso al directorio /cgi-bin, nos es posible subirlos, compilarlos y luego
correrlos. Los mejores lugares en la red para obtener información, código fuente
y ejemplos de cómo hacer esta hazaña son:
El TYPE más común para la etiqueta <INPUT>
de un formulario es TEXT.
<FORM>
<INPUT TYPE="text">
</FORM>
Toda etiqueta <INPUT> necesita un NAME
para poder identificar el valor que el usuario ingresa, es decir, el valor del
parámetro NAME es el nombre de la variable que alojará el valor ingresado
por el usuario.
<FORM>
<INPUT TYPE="text" NAME="nombre">
</FORM>
Cuando el usuario ingresa su nombre en la casilla de texto
(por ejemplo Morgan Clay), éste se convertirá en el valor de entrada de la etiqueta
INPUT y será relacionado con "nombre" (NAME="nombre"),
de forma que el resultado que será procesado será el par nombre=Morgan Clay.
Es posible, si así lo deseamos, establecer un valor predetermindado de la siguiente
manera:
Esto automáticamente generará el par nombre=J.J. Lopez, que
sólo será modificado si el usuario lo cambia. El tamaño de las casillas puede
ser especificado también de la siguiente manera:
El valor predeterminado para el tamaño de un INPUT
es SIZE=20, es decir, que sino le explicitamos otro tamaño, el navegador
asumirá el valor 20 para el parámetro SIZE.
También podemos indicar la cantidad de caracteres a ingresar
por el usuario, aunque no es muy utilizado este parámetro, puede resultar útil
en algunas ocasiones. Por ejemplo, un límite de 15 caracteres lo indicamos de
la siguiente manera:
Muy similar al TYPE=TEXT es el TYPE=PASSWORD.
Es exactamente igual al tipo texto, con la diferencia que despliega en pantalla
*** en lugar de letras a medida que tipea el usuario.
Acá también cuentan los atributos SIZE, VALUE,
y MAXLENGTH.
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 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.
Si lo hacemos completo, se vería así:
<FORM>
¿Quién será el campeón del torneo argentino?<BR>
<BR><INPUT TYPE="radio" NAME="equipos"
VALUE="cuervo" CHECKED>San Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos"
VALUE="gallina"> River Plate
<BR><INPUT TYPE="radio" NAME="equipos"
VALUE="bostero"> Boca Juniors
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="rojos">Independiente
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="academia">
Racing Club
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="fortineros">
Vélez Sarsfield
</FORM>
Check Boxes
La construcción de Check Boxes es bastante similar:
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
habra 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:
Para la creación de listas de elementos utilizamos la etiqueta
<SELECT> en lugar de la utilizada anteriormente <INPUT>,
y a diferencia de esta útlima debe ser cerrada con su para </SELECT>.
Es decir:
<FORM>
<SELECT>
elementos de la lista <
</SELECT>
</FORM>
Listas Desplegables
Le damos un NAME y agregamos algunos elementos.
<FORM>
<SELECT NAME="equipos">
<OPTION>San Lorenzo
<OPTION>River Plate
<OPTION>Boca Juniors
<OPTION>Independiente
<OPTION>Racing Club
</SELECT>
</FORM>
A cada <OPTION> le otorgamos un valor:
<FORM>
<SELECT NAME="equipos">
<OPTION 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>
La opción por defecto de una lista de este tipo es la primera
<OPTION> declarada. Si quisiéramos marcar otra opción por defecto
lo hacemos con el parámetro SELECTED de esta manera:
<FORM>
<SELECT NAME="equipos">
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina" SELECTED>River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>
Listas Desplegadas
La construcción de una lista desplegada es bastante similar
a la de una lista desplegable, solo difieren en algunos parámetros. Para convertir
la lista desplegable de equipos en una lista ya desplegada utilizamos el parámetro
SIZE de la siguiente manera:
<FORM>
<SELECT NAME="equipos" SIZE=5>
<OPTION 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 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:
<FORM>
<SELECT NAME="equipos" SIZE=3>
<OPTION 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>
Al igual que las lista desplegables podemos indicar un elemento
seleccionado por defecto mediante el parámetro SELECTED:
Para generar un area de texto donde el usuario pueda escribir
libremente un mensaje, un comentario o sugerencia, debemos utilizar la etiqueta
<TEXTAREA> de la siguiente manera:
Controlamos el tamaño del area de texto con los parámetros
ROWS y COLS, cuyos valores representan el número de filas y columnas
respectivamente que ocupará en pantalla dicha area. Para entenderlo mejor, ROWS
sería la altura y COLS la anchura.
Un atributo interesante de esta etiqueta <TEXTAREA>
es WRAP. Algunos navegadores no lo interpretan correctamente,
lo que significa que directamente lo ignorarán. Este parámetro WRAP significa
que el texto ingresado no puede superar los márgenes laterales, es decir, cuando
el usuario llegue al final del margen derecho automáticamente desplazará el
cursor hacia abajo sin esperar que el usuario presione la tecla ENTER.
WRAP="soft" significa que el texto ingresado
en la caja de texto no superará los margenes laterales, pero será porcesado
como una línea larga de caracteres, es decir, viajará a su destino como una
larga cadena de caracteres.
Esto es normalmente el valor por defecto de las areas de
texto si es que no se especifica un valor distinto para este parámetro.
Botones SUBMIT y RESET
Son muy simples de declarar:
<FORM>
<INPUT TYPE="submit">
</FORM>
Este tipo de boton envía la información. Mientras que el
RESET lo que hace es borrar las modificaciones realizadas por el usuario
y regresar todos los valores por defecto.
<FORM>
<INPUT TYPE="reset">
</FORM>
Es posible cambiar el texto de estos botones con el parámetro
VALUE:
En caso de ser necesario, no es lo común, podemos asignarle
un NAME a los botones de RESET y SUBMIT. Esto sería necesario
en el caso extraordinario de tener dos botones del mismo tipo en un mismo formulario,
algo más que insólito.