Les dejo un tuto mientras el link esta caido, algo sobre formularios en HTML..
Qué son los formularios? 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:
<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>
</noscript>
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999">
<! -- no ads -->
</div></div>
</HTML>
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:TUMAIL@com" METHOD=POST>/p>
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. -->
<input type=hidden name="to" value="quantum@mundo21.com">
<input type=hidden name="return-url" value="You are not allowed to view links.
Register or
Login">
<!-- 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. -->
<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>
<!-- 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 You are not allowed to view links.
Register or
Login.
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:
You are not allowed to view links.
Register or
LoginYou are not allowed to view links.
Register or
Login 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:
You are not allowed to view links.
Register or
LoginYou are not allowed to view links.
Register or
LoginConstrucción de Formularios
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:
<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>
<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=15>
</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>
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>