¿Qué
son los formularios?
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.
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.
Definición: 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; yTYPE,
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.
EJEMPLO
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>
Forma gráfica:
|
Nombre:
|
|
|
Email:
|
|
|
Motivo:
|
|
|
Mensaje:
|
|
|
|
No hay comentarios:
Publicar un comentario