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 Webutilizado 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> sonNAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT,RESET, IMAGE, y 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.
¿Cómo se ven?
Abrimos nuestro editor de texto preferido y creamos el siguiente archivo html:
<HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”mailto:quantum@mundo21.com” METHOD=POST>
<table align=”center” border=”0″>
<td align=”left” width=”100″>Nombre:
</td>
<td align=”center” width=”150″><INPUT NAME=”nombre” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″>Email:
</td>
<td align=”center” width=”150″><INPUT NAME=”mail” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″>Motivo:
</td>
<td align=”center” width=”150″><INPUT NAME=”motivo” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″> Mensaje:
</td>
<td><TEXTAREA NAME=”mensaje” ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht=”100″>
</td>
<td align=”right” width=”150″><INPUT NAME=”boton” TYPE=”SUBMIT” VALUE=”Enviar”>
</td>
</TABLE>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”mailto:quantum@mundo21.com” METHOD=POST>
<table align=”center” border=”0″>
<td align=”left” width=”100″>Nombre:
</td>
<td align=”center” width=”150″><INPUT NAME=”nombre” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″>Email:
</td>
<td align=”center” width=”150″><INPUT NAME=”mail” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″>Motivo:
</td>
<td align=”center” width=”150″><INPUT NAME=”motivo” MAXLENGTH=”25″ TYPE=”TEXT” VALUE=”">
</td>
<tr>
<td align=”left” width=”100″> Mensaje:
</td>
<td><TEXTAREA NAME=”mensaje” ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht=”100″>
</td>
<td align=”right” width=”150″><INPUT NAME=”boton” TYPE=”SUBMIT” VALUE=”Enviar”>
</td>
</TABLE>
</FORM>
</BODY>
</HTML>
Lo que se vería de esta forma:
Aunque parezca complicado a primera vista el código anterior, con un poco de práctica puede resultar muy natural. Analicemoslo paso a paso:
El formulario comienza con esta línea:
<FORM ACTION=”mailto:micorreo@dominio.com” METHOD=POST>
Construcción de Formularios
El TYPE más común para la etiqueta <INPUT> de un formulario es TEXT.
<FORM>
<INPUT TYPE=”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>
<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 INPUTy 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:
<FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”J.J. Lopez”>
</FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”J.J. Lopez”>
</FORM>
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:
<FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=20>
</FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=20>
</FORM>
<FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=15>
</FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=15>
</FORM>
<FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=10>
</FORM>
<INPUT TYPE=”text” NAME=”nombre” VALUE=”Morgan Clay” SIZE=10>
</FORM>
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:
<FORM>
<INPUT TYPE=”text” NAME=”nombre” SIZE=30 MAXLENGTH=15>
</FORM>
<INPUT TYPE=”text” NAME=”nombre” SIZE=30 MAXLENGTH=15>
</FORM>
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.
<FORM>
<INPUT TYPE=”password” NAME=”clave”>
</FORM>
<INPUT TYPE=”password” NAME=”clave”>
</FORM>
También se tendrán en cuenta 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.
Radio Buttons
<FORM>
<INPUT TYPE=”radio” NAME=”equipos”>
</FORM>
<INPUT TYPE=”radio” NAME=”equipos”>
</FORM>
Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:
<FORM>
<INPUT TYPE=”radio” NAME=”equipos” VALUE=”cuervo”>San Lorenzo
<BR><INPUT TYPE=”radio” NAME=”equipos” VALUE=”gallina”>River Plate
<BR><INPUT TYPE=”radio” NAME=”equipos” VALUE=”bostero”>Boca Juniors
</FORM>
<INPUT TYPE=”radio” NAME=”equipos” VALUE=”cuervo”>San Lorenzo
<BR><INPUT TYPE=”radio” NAME=”equipos” VALUE=”gallina”>River Plate
<BR><INPUT TYPE=”radio” NAME=”equipos” VALUE=”bostero”>Boca Juniors
</FORM>
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>
¿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:
<FORM>
<INPUT TYPE=”checkbox” NAME=”cuervo”>
</FORM>
<INPUT TYPE=”checkbox” NAME=”cuervo”>
</FORM>
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:
<FORM>
<INPUT TYPE=”checkbox” NAME=”cuervo” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”gallina” VALUE=”YES”> River PLate
<BR><INPUT TYPE=”checkbox” NAME=”bostero” VALUE=”YES”> Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”rojo” VALUE=”YES”> Independiente
</FORM>
<INPUT TYPE=”checkbox” NAME=”cuervo” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”gallina” VALUE=”YES”> River PLate
<BR><INPUT TYPE=”checkbox” NAME=”bostero” VALUE=”YES”> Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”rojo” VALUE=”YES”> Independiente
</FORM>
Al igual que con los Radio Buttons podemos hacer uso del parámetroCHECKED para marcar alguna por defecto, si así lo quisiéramos:
<FORM>
¿Quiénes son amargos?<BR>
<BR><INPUT TYPE=”checkbox” NAME=”cuervo” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”gallina” VALUE=”YES” CHECKED>River PLate
<BR><INPUT TYPE=”checkbox” NAME=”bostero” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”rojo” VALUE=”YES” CHECKED>Independiente
</FORM>
¿Quiénes son amargos?<BR>
<BR><INPUT TYPE=”checkbox” NAME=”cuervo” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”gallina” VALUE=”YES” CHECKED>River PLate
<BR><INPUT TYPE=”checkbox” NAME=”bostero” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”rojo” VALUE=”YES” CHECKED>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 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:
<FORM>
<TABLE BORDER=”1″ ALIGN=”center”>
<TR>
<TD WIDTH=”350″>
¿Cuál es la hinchada más original?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”original?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”original?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”original?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”original?..I” VALUE=”YES”>Independiente
</TD>
<TR>
<TD WIDTH=”350″>
¿Cuál es más numerosa?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..I” VALUE=”YES”>Independiente
</TD>
<TR>
<TD WIDTH=”350″>
¿Cuál es más fiestera?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..I” VALUE=”YES”>Independiente
</TD>
</TABLE>
</FORM>
<TABLE BORDER=”1″ ALIGN=”center”>
<TR>
<TD WIDTH=”350″>
¿Cuál es la hinchada más original?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”original?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”original?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”original?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”original?..I” VALUE=”YES”>Independiente
</TD>
<TR>
<TD WIDTH=”350″>
¿Cuál es más numerosa?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”numerosa?..I” VALUE=”YES”>Independiente
</TD>
<TR>
<TD WIDTH=”350″>
¿Cuál es más fiestera?
</TD>
<TR>
<TD WIDTH=”350″>
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..SL” VALUE=”YES”>San Lorenzo
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..RP” VALUE=”YES”>River Plate
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..BJ” VALUE=”YES”>Boca Juniors
<BR><INPUT TYPE=”checkbox” NAME=”fiestera?..I” VALUE=”YES”>Independiente
</TD>
</TABLE>
</FORM>
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:
original?..SL=YES
numerosa?..BJ=YES
fiestera?..SL=YES
Listas
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>
<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>
<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>
<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>
<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>
<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>
<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:
<FORM>
<SELECT NAME=”equipos” SIZE=3>
<OPTION VALUE=”cuervo”>San Lorenzo
<OPTION VALUE=”gallina” SELECTED>River Plate
<OPTION VALUE=”bostero”>Boca Juniors
<SELECT NAME=”equipos” SIZE=3>
<OPTION VALUE=”cuervo”>San Lorenzo
<OPTION VALUE=”gallina” SELECTED>River Plate
<OPTION VALUE=”bostero”>Boca Juniors
No hay comentarios:
Publicar un comentario