Formularios en HTML

FORMULARIOS EN HTML
Qu son los formularios?

Los formularios son posiblemente la herramineta ms utilizada en Internet para obtener
datos e informacin acerca de la gente que navega nuestro sitio. La idea de los
formularios es recolectar informacin online en la interaccin con el usuario y luego
ejecutar una determinada accin con la misma, que podra ser por ejemplo, quizs el
caso ms utilizado, un formulario de venta que el usuario completa y luego es enviado
va
email
al
vendedor
en
forma
encriptada.
Este tema a diferencia de los anteriores es bastante ms complejo y oscuro, aparecern
terminos como CGI scripts, Perl o bien lenguajes de programacin como C, que
seguramente nos desalentarn al principio, pero que con el tiempo asumiremos como
familiares. La idea de esta sinttica gua de formularios es brindar al newbie o novato un
pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio
web.
Cmo los definimos?
Cinco son solamente las etiquetas que el cdigo HTML posee para definir todos los
elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>,
<SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un nmero de
modificadores o atributos, son suficientes para indicarle al navegador cliente cmo debe
recolectar la informacin, cmo debe manejarla una vez recolectada y cmo 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
ACTION
METHOD
ENCTYPE
Descripcin
el valor de este parmetro es la
URL del programa o guin en
el Servidor Web utilizado para
procesar la informacin
recolectada.
puede asumir el valor GET o
el valor POST, y definen la
manera en la cual los datos
son transferidos al servidor.
este atributo est reservado
para que la informacin viaje
en forma encriptada a travs
de Internet.
Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario
que generemos, ya que establecen dnde enviar la informacin y cmo enviarla. El
atributo o parmetro ENCTYPE es optativo y no es realmente importante.
Etiqueta <INPUT>
La etiqueta <INPUT> es la segunda etiqueta ms importante de los formularios. Se la
puede definir como una etiqueta multifuncin, ya que con la misma podemos crear
"push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto.
Posee ocho posibles parmetros: ALIGN, CHECKED, MAXLENGTH, NAME,
SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parmetros 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. Ms adelante todo ser ms 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.
Cmo 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"
</td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo" MAXLENGTH="25"
</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 vera de esta forma:
Nombre:
Email:
Motivo:
Mensaje:
Enviar
Aunque parezca complicado a primera vista el cdigo anterior, con un poco de prctica
puede resultar muy natural. Analicemoslo paso a paso:
El formulario comienza con esta lnea:
<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>/p>
Como dijimos anteriormente todo formulario debe comenzar con la etiqueta <FORM>
y finalizar con </FORM>. El parmetro ACTION define qu es lo que debemos hacer
con la informacin obtenida, en este caso le indicamos al navegador que nos envi los
datos a nuestra direccin de correo electrnico (en el ejemplo la mandan a mundo21).

La mayora de los formularios en Internet realizan esta tarea, es decir, recolectan
informacin del usuario y la envan por correo electrnico hacia algn destino. Para
realizar esta tarea existen dos formas de hacerlo, una es la utilizada anteriormente, y la
otra es hacer uso de algn script o guin CGI (Comon Gateway Interface) que procesa
los datos y los reenva hacia donde le indicamos. Un script CGI es un pequeo
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
informacin
entre
el
servidor
y
el
cliente.
Cul es la diferencia entre ambos mtodos?, el utilizado en nuestro ejemplo es ms
sencillo y no utiliza ningn script, pero a su vez es menos eficaz, ya que en la mayora
de los casos no funcionar. Mientras que el segundo, si bien un poco ms 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 quisiramos utilizar
un script CGI, es necesario averiguar si el servidor web que aloja nuestro sitio posee un
directorio con scripts cgi, comnmente 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 gratutos 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 electrnico, as sera la configuracin del mismo en nuestra pgina:
<FORM ACTION="/cgi-bin/mailto.pl" METHOD=POST>

<input type=hidden name="to" value="quantum@mundo21.com">
<input type=hidden name="return-url"
value="http://www.mundo21.com/gracias.html">

<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>
<INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100">Motivo:
</td>
<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>
Como dijimos arriba, si por alguna razn nuestro proveedor de Internet o servidor web
donde alojamos nuestro sitio no posee scripts CGI, no debemos bajar los brazos, an
nos queda una posibilidad: utilizar guiones gratutos online. Existen muchas empresas
que ofrecen este servicio y adems 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:
http://www.cgiresources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/
http://www.sbrady.com/hotsource/cgi/index.html#ffp
Para los ms osados y valientes, an 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 informacin, cdigo fuente y ejemplos de cmo hacer esta
hazaa son:
http://www.cgi-resources.com/Programs_and_Scripts/
http://www.artsackett.com/freebies/asform/
Construccin de Formularios
El TYPE ms comn 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 parmetro 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
</FORM>
TYPE="text"
NAME="nombre"
VALUE="J.J.
Lopez">
J.J. Lopez
Esto automticamente generar el par nombre=J.J. Lopez, que slo ser modificado si el
usuario lo cambia. El tamao de las casillas puede ser especificado tambin de la
siguiente manera:
<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=20>
</FORM>
Morgan Clay
<FORM>
</FORM>
Morgan Clay
<FORM>
</FORM>
Morgan Clay
El valor predeterminado para el tamao de un INPUT es SIZE=20, es decir, que sino le

explicitamos otro tamao, el navegador asumir el valor 20 para el parmetro SIZE.
Tambin podemos indicar la cantidad de caracteres a ingresar por el usuario, aunque no
es muy utilizado este parmetro, puede resultar til en algunas ocasiones. Por ejemplo,
un lmite 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>
Ac tambin 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 ms opciones.
Radio Buttons
<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>
San Lorenzo
River Plate
Boca Juniors
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 seleccin del usuario, por ejemplo si marcase la primera se
procesara la siguiente informacin: equipos=cuervo. Con el parmetro CHECKED le
indicamos al navegador cual de todas las opciones debe aparecer marcada por defecto.
Si lo hacemos completo, se vera as:
<FORM>
Quin ser el campen 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"> Vlez
Sarsfield
</FORM>
Quin ser el campen del torneo argentino?
San Lorenzo
River Plate
Boca Juniors
Independiente
Racing Club
Vlez Sarsfield
Check Boxes
La construccin de Check Boxes es bastante similar:
<FORM>
<INPUT TYPE="checkbox" NAME="cuervo">
</FORM>
A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor para el
parmetro 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>
San Lorenzo
River PLate
Boca Juniors
Independiente
Al igual que con los Radio Buttons podemos hacer uso del parmetro CHECKED para
marcar alguna por defecto, si as lo quisiramos:
<FORM>
Quines 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>
Quines son amargos?
San Lorenzo
River PLate
Boca Juniors
Independiente
Si bien, algunas opciones estn marcadas por defecto, el usuario es capaz de

desmarcarlas y marcar otras. Los datos sern 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 ningn valor procesado)
Ahora bien, supongamos que quisiramos hacer tres preguntas con opciones acerca de
un mismo tema, como lo haramos?, muy simple, lo nico que debemos recordar es
que no puede haber NAMES duplicados en un mismo formulario, por tanto el
formulario tendra esta pinta:
<FORM>
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD WIDTH="350">
Cul es la hinchada ms 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">
Cul es ms 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"
</TD>
<TR>
<TD WIDTH="350">
Cul es ms 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"
</TD>
</TABLE>
</FORM>
Cul es la hinchada ms original?
San Lorenzo
River Plate
Boca Juniors
Independiente
Cul es ms numerosa?
San Lorenzo
River Plate
Boca Juniors
Independiente
Cul es ms fiestera?
San Lorenzo
River Plate
Boca Juniors
Independiente
Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda

"Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la informacin procesada
ser entonces:
original?..SL=YES
numerosa?..BJ=YES
fiestera?..SL=YES
Listas
Para la creacin 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>
<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>
San Lorenzo
La opcin por defecto de una lista de este tipo es la primera <OPTION> declarada. Si
quisiramos marcar otra opcin por defecto lo hacemos con el parmetro SELECTED
de esta manera:
<FORM>
<OPTION VALUE="gallina" SELECTED>River Plate
</SELECT>
</FORM>
River Plate
Listas Desplegadas
La construccin de una lista desplegada es bastante similar a la de una lista desplegable,
solo difieren en algunos parmetros. Para convertir la lista desplegable de equipos en
una lista ya desplegada utilizamos el parmetro SIZE de la siguiente manera:
<FORM>
<SELECT NAME="equipos" SIZE=5>
</SELECT>
</FORM>
San Lorenzo
River Plate
Boca Juniors
Independiente
Racing Club
El valor del parmetro SIZE indica exactamente cuntos elementos desplegar

simultneamente. Si el valor del SIZE es menor al nmero total de elementos de la lista,
automticamente 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>
</FORM>
San Lorenzo
River Plate
Boca Juniors
Al igual que las lista desplegables podemos indicar un elemento seleccionado por
defecto mediante el parmetro SELECTED:
<FORM>
<OPTION VALUE="gallina" SELECTED>River Plate
</SELECT>
</FORM>
San Lorenzo
River Plate
Boca Juniors
AREA DE TEXTO
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:
<FORM>
<TEXTAREA NAME="SUGERENCIAS">
</TEXTAREA>
</FORM>
Controlamos el tamao del area de texto con los parmetros ROWS y COLS, cuyos
valores representan el nmero de filas y columnas respectivamente que ocupar en
pantalla dicha area. Para entenderlo mejor, ROWS sera la altura y COLS la anchura.
<FORM>
<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50>
</TEXTAREA>
</FORM>
Un atributo interesante de esta etiqueta <TEXTAREA> es WRAP. Algunos

navegadores no lo interpretan correctamente, lo que significa que directamente lo
ignorarn. Este parmetro WRAP significa que el texto ingresado no puede superar los
mrgenes laterales, es decir, cuando el usuario llegue al final del margen derecho
automticamente desplazar el cursor hacia abajo sin esperar que el usuario presione la
tecla ENTER.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA>
</FORM>
WRAP="soft" significa que el texto ingresado en la caja de texto no superar los

margenes laterales, pero ser porcesado como una lnea larga de caracteres, es decir,
viajar a su destino como una larga cadena de caracteres.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard">
</TEXTAREA>
</FORM>
WRAP="hard" significa que el texto es enviado tal cual fue ingresado.

<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off">
</TEXTAREA>
</FORM>
Esto es normalmente el valor por defecto de las areas de texto si es que no se especifica
un valor distinto para este parmetro.
Botones SUBMIT y RESET
Son muy simples de declarar:
<FORM>
<INPUT TYPE="submit">
</FORM>
Enviar consulta
Este tipo de boton enva la informacin. 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>
Restablecer
Es posible cambiar el texto de estos botones con el parmetro VALUE:

<FORM>
<INPUT TYPE="submit" VALUE="Enviar Datos">
<INPUT TYPE="reset" VALUE="Borrar Datos">
</FORM>
Enviar Datos
Borrar Datos
En caso de ser necesario, no es lo comn, podemos asignarle un NAME a los botones

de RESET y SUBMIT. Esto sera necesario en el caso extraordinario de tener dos
botones del mismo tipo en un mismo formulario, algo ms que inslito.
Podemos utilizar una imagen como boton SUBMIT:
<FORM>
<INPUT TYPE="image" SRC="enviar.jpg" WIDTH=70 HEIGHT=35 <BORDER=0
ALT="Submit">
</FORM>
Para el caso de botones del tipo RESET no nos es posible asignarle una imagen.
Aqu va un simple truco, un botn que nos transporta a otra pgina:
<FORM ACTION="indexweb.php3">
<INPUT TYPE="submit" VALUE="Tutorial">
</FORM>
Tutorial
Formularios en HTML
Los formularios interactivos permiten a los autores de pginas Web poner elementos
interactivos en sus pginas, por ejemplo, para recibir mensajes de sus lectores, de forma
similar a las cartas de respuestas que se encuentra en algunas revistas.
El lector escribe la informacin rellenando campos o haciendo clic sobre botones, y
luego presiona un botn de envo para enviarla a una direccin URL que se suele dirigir
a una direccin de correo electrnico o a un script dinmico Web como PHP, ASP o
CGI.
La etiqueta FORM
Los formularios estn delimitados con la etiqueta <FORM> ... </FORM>, que permite
reunir varios elementos de formulario, como botones y casillas de texto y que debe
poseer los siguientes atributos:
METHOD indica cmo se enviarn las respuestas

"POST" es el valor que enva los datos al agente de procesamiento
almacenndolos en el cuerpo del formulario, en tanto que "GET" enva los datos
agregndolos a la direccin URL y separndolos de la direccin con un signo de
interrogacin (para aprender ms sobre los mtodos POST y GET, consulte el
artculo sobre protocolo HTTP)
ACTION indica la direccin a la que se enviar la informacin (un script CGI o

direccin de correo electrnico (mailto:direccin_de_correo_e@equipo))
Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se

codifican los datos del formulario. De cualquier forma, esto no necesita especificarse,
ya que el valor predeterminado (application/x-www-form-urlencoded) es el nico valor
vlido. El atributo opcional ACCEPT se usa para establecer tipos MIME para los datos
que el formulario puede enviar.
Esta es la sintaxis para la etiqueta FORM:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-formurlencoded"> ... </FORM>
Aqu hay algunos ejemplos de las etiquetas FORM:

<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">
<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgibin/script.cgi">
Dentro de la etiqueta FORM

La etiqueta FORM acta como una especie de contenedor para almacenar elementos que
permiten al usuario seleccionar o introducir datos. Todos los datos se enviarn a la
direccin URL indicada en el atributo ACTION de la etiqueta FORM, por el mtodo
indicado en el atributo METHOD.
Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto,
botones, tablas y enlaces), pero los elementos interactivos son los ms interesantes.
Estos elementos interactivos son:
La etiqueta INPUT: Todos los botones y casillas de texto
La etiqueta TEXTAREA: una casilla de texto
La etiqueta SELECT: una lista de opciones mltiples
Envo de datos
Cuando se enva un formulario (haciendo clic en el botn de envo), los datos del
formulario se envan a un script CGI bajo la forma de pares nombre/valor, es decir
conjuntos de datos representados por el nombre del elemento formulario, un signo igual
("=") y luego el valor asociado. Estos pares nombre/valor se separan unos de otros
mediante el smbolo de unin ("&"). Por lo tanto, los datos que se envan al script se
vern as:
campo1=valor1&field2;=valor2&field3;=valor3
Con el mtodo GET (enviar los datos mediante una direccin URL), la URL ser una
cadena como la siguiente:
http://es.kioskea.net/cgi-bin/script.cgi?campo1=valor1&field2;=valor2
La etiqueta INPUT
La etiqueta INPUT es una etiqueta esencial para los formularios, ya que se usa para
crear muchos elementos interactivos. La sintaxis de esta etiqueta es la siguiente:
<INPUT type="Nombre de campo" value="Valor predeterminado"

name="Nombre de elemento">
El atributo name es esencial, ya que permite al script CGI reconocer qu campo est
asociado con un par nombre/valor, lo que significa que el nombre del campo estar
seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el
usuario no introdujo ningn valor, por el valor predeterminado de la etiqueta value.
El atributo type se usa para especificar qu tipo de elemento se representa con la
etiqueta INPUT. Estos son los valores posibles:
checkbox: Las casillas de eleccin pueden adoptar uno de dos estados: checked
(seleccionado) o unchecked (no seleccionado). Cuando la casilla es
seleccionada, el par nombre/valor se enva al CGI.
hidden: Este campo, que el navegador no muestra, es para definir una

configuracin nica que se enviar al CGI como par nombre/valor.
file: Un campo que permite al usuario especificar una ruta de archivo que lleva
al archivo que se enviar con el formulario. Los tipos de archivo que pueden ser
enviados deben especificarse utilizando el atributo ACCEPT de la etiqueta
FORM.
image: Un botn de envo personalizado que aparece cuando se ubica una

imagen en la ubicacin definida por el atributo SRC.
password: Una casilla de texto donde los caracteres escritos aparecen como
asteriscos para camuflar el texto de entrada.
radio: Un botn que permite al usuario elegir entre varias opciones. Cada uno
de estos botones debe tener el mismo atributo name. El par nombre/valor del
botn radio seleccionado se enviar al CGI. Al aplicar el atributo checked para
uno de estos botones se definir como seleccionado de forma predeterminada.
reset: Un botn de restauracin para quitar todos los elementos en el formulario

y restablecer sus valores predeterminados.
submit: Un botn de envo para enviar el formulario. El texto en el botn puede

definirse usando el atributo value.
text: Una casilla de texto para escribir una lnea de texto. El tamao de la casilla
puede definirse usando el atributo size y la extensin mxima del texto con el
atributo maxlength.
La etiqueta TEXTAREA
La etiqueta TEXTAREA se usa para definir un cuadro de texto ms grande que la lnea
simple propuesta por la etiqueta INPUT. Esta etiqueta tiene los siguientes atributos:
cols: representa el nmero de caracteres que puede contener un lnea
rows: representa el nmero de lneas
name: representa el nombre asociado con el cuadro de texto, que permite su

identificacin en el par nombre/valor.
readonly: impide que el usuario modifique el texto predeterminado en el campo
value: representa el valor predeterminado que se enviar al script si el usuario

no ha escrito nada en el cuadro de texto
La etiqueta SELECT
La etiqueta SELECT sirve para crear una lista desplegable de elementos (especificados
por las etiquetas OPTION dentro de ella). Los atributos de esta etiqueta son:
name: name: representa el nombre asociado con la casilla de texto, que permite
su identificacin en el par nombre/valor.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el nmero de lneas de la lista (este valor puede ser ms grande
que el nmero de elementos reales de la lista).
multiple: Permite al usuario seleccionar varios campos de la lista
Ejemplo de formulario
Los formularios pueden ubicarse en una pgina usando tablas (algo recomendable para
una presentacin profesional). Este es un ejemplo que resume los puntos precedentes,
mostrndole cmo disponer un formulario en una pgina Web mediante una tabla:
<FORM method=post action="cgi-bin/script.pl">
Registro de un usuario
<TABLE BORDER=0>
<TR>
<TD>Apellido</TD>
<TD>
<INPUT type=text name="apellido">
</TD>
</TR>
<TR>
<TD>Nombre</TD>
<TD>
<INPUT type=text name="nombre">
</TD>
</TR>
<TR>
<TD>Gnero</TD>
<TD>
Hombre:
Mujer: <INPUT type=radio name="gnero" value="M">

<br>Mujer: <INPUT type=radio name="gnero" value="F">
</TD>
</TR>
<TR>
</TR>
<TR>
Enviar
</TR>
<TD>Ocupacin</TD>
<TD>
<SELECT name="ocupacin">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</SELECT>
</TD>
<TD>Comentarios</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Escriba aqu sus comentarios</TEXTAREA>
</TD>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Enviar">
</TD>
</TR>
</TABLE>
</FORM>
Esto es lo que aparece en la pantalla:

Registro de usuario
Apellido
Nombre
Hombre: Mujer:
Gnero
Mujer:
Ocupacin
Escriba aqu sus comentarios
Comentarios
Enviar
Atributos de etiquetas FORM y tipos de entrada

Etiqueta
Atributo
Valor
Resultado
Efecto visual
METHOD
<FORM> ...
</FORM>
POST
GET
ACTION
ENCTYPE
submit
text
TYPE
<INPUT>
Reset
Radio
Checkbox
NAME
SIZE
NAME
<TEXTAREA> ...
ROWS
</TEXTAREA>
COLS
<SELECT>
NAME
<OPTION> ...
</OPTION>
OTRO EJEMPLO
<html>
<head>
<title></title>
</head>
<body>
VALUE
Reset
Opcin 1
Mltiples
selecciones
posibles
MULTIPLE
SELECTED
Send
Casilla de texto
</SELECT>
<OPTION> ...
</OPTION>
Enva a la
direccin
mostrada
Especifica el
tipo de cdigo
realiza la
ACTION de la
etiqueta
<FORM>
lnea simple de
texto cuya
longitud
se especifica
por el atributo
SIZE
Elimina el
contenido del
formulario
botn de radio
casilla de
seleccin
Nombre
Tamao del
texto
Eleccin
predeterminada
Valor forzado
Opcin 1
Opcin 1
Opcin 2
Opcin 3
<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">

<P>
<LABEL for="nombre">Nombre: </LABEL>
<INPUT type="text" id="nombre"><BR>
<LABEL for="apellido">Apellido: </LABEL>
<INPUT type="text" id="apellido"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sexo" value="Varn"> Varn<BR>
<INPUT type="radio" name="sexo" value="Mujer"> Mujer<BR>
<INPUT type="submit" value="Enviar"> <INPUT type="reset">
</P>
</FORM>
</body>
</html>
EJEMPLO 3
<html>
<head>
<TITLE>Formularios HTML</TITLE>
</HEAD>
<BODY>
<table width="802" border="1" align="center">
<tr>
<td height="36">
<CENTER>
<h4><b>FORMULARIOS HTML </b></h4>
</CENTER>
</td>
</tr>
</table>
<table width="802" border="1" align="center">
<tr>
<td width="802" align=center> <div align="left">
<CENTER>
<p align="center"><strong>Ejemplo 1 </strong></p>
<p align="left"> </p>
<p align="justify"><form>
<div align="left">entra tu nombre y apellidos:
<input type="Text" name="nombre" size="40" maxlength="30">
<br>
<br>
elije un tema:<br>
<input type="Radio" name="tema" value="ciencia" checked>
ciencia<br>
<input type="Radio" name="tema" value="arte">
arte<br>
<input type="Radio" name="tema" value="literatura">
literatura<br>
<br>
marca tus aficiones:<br>
<input type="Checkbox" name="aficion" value="deporte" checked>
deporte<br>
<input type="Checkbox" name="aficion" value="musica" checked>
msica<br>
<input type="Checkbox" name="aficion" value="lectura">
lectura<br>
<input type="Checkbox" name="aficion" value="pesca">
pesca<br>
<br>
entra la contrasea de usuario:
<input type="Password" name="password" size="5" maxlength="8">
<br>
<br>
<input type="Submit" value="enviar datos">
<input type="Reset" value="borrar datos">
<br>
<br>
<INPUT TYPE="BUTTON" VALUE="ver cdigo fuente" onClick=
'window.location = "view-source:" + window.location.href' >
<INPUT TYPE="BUTTON" VALUE="cerrar ventana"
onClick="window.close();">
</form>
</CENTER>
</CENTER>
</div></td>
</tr>
</table>
</BODY>
</HTML>
</body>
</html>

Formularios en HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Formularios en HTML

Transféré par

Droits d'auteur :

Formats disponibles

FORMULARIOS EN HTML

Qu son los formularios?

datos a nuestra direccin de correo electrnico (en el ejemplo la mandan a mundo21).

El valor predeterminado para el tamao de un INPUT es SIZE=20, es decir, que sino le

Muy similar al TYPE=TEXT es el TYPE=PASSWORD. Es exactamente igual al tipo

Ac tambin cuentan los atributos SIZE, VALUE, y MAXLENGTH.

Si bien, algunas opciones estn marcadas por defecto, el usuario es capaz de

Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda

El valor del parmetro SIZE indica exactamente cuntos elementos desplegar

Un atributo interesante de esta etiqueta <TEXTAREA> es WRAP. Algunos

WRAP="soft" significa que el texto ingresado en la caja de texto no superar los

WRAP="hard" significa que el texto es enviado tal cual fue ingresado.

Es posible cambiar el texto de estos botones con el parmetro VALUE:

En caso de ser necesario, no es lo comn, podemos asignarle un NAME a los botones

METHOD indica cmo se enviarn las respuestas

ACTION indica la direccin a la que se enviar la informacin (un script CGI o

Un atributo opcional de la etiqueta FORM es ENCTYPE, que especifica cmo se

Aqu hay algunos ejemplos de las etiquetas FORM:

Dentro de la etiqueta FORM

La etiqueta INPUT: Todos los botones y casillas de texto

La etiqueta TEXTAREA: una casilla de texto

La etiqueta SELECT: una lista de opciones mltiples

<INPUT type="Nombre de campo" value="Valor predeterminado"

hidden: Este campo, que el navegador no muestra, es para definir una

image: Un botn de envo personalizado que aparece cuando se ubica una

reset: Un botn de restauracin para quitar todos los elementos en el formulario

submit: Un botn de envo para enviar el formulario. El texto en el botn puede

cols: representa el nmero de caracteres que puede contener un lnea

rows: representa el nmero de lneas

name: representa el nombre asociado con el cuadro de texto, que permite su

readonly: impide que el usuario modifique el texto predeterminado en el campo

value: representa el valor predeterminado que se enviar al script si el usuario

disabled: crea un lista desactivada, que aparece atenuada

multiple: Permite al usuario seleccionar varios campos de la lista

Mujer: <INPUT type=radio name="gnero" value="M">

Esto es lo que aparece en la pantalla:

Atributos de etiquetas FORM y tipos de entrada

<FORM action="http://algunsitio.com/prog/usuarionuevo" method="post">

Vous aimerez peut-être aussi