Los formularios nos permiten dentro de una página Web
solicitar información al visitante y procesarla. En un formulario podremos
solicitar diferentes datos (campos) cada uno de los cuales quedará asociado a
una variable. Una vez se hayan introducido los valores en los campos, el
contenido de estos será enviado a la dirección (URL) donde tengamos el programa
que pueda procesar las variables. Para poder realizar este último paso de procesar las variables necesitaremos realizar un
programa externo en algun lenguaje de programación
como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (CommonGatewayInterface). La creación de este tipo de programas sería
tema de otro curso diferente, por lo que aquí veremos como se pueden enviar las
variables a nuestra dirección de correo electrónico.
La declaración del formulario se pone entre las
directivas <FORM></FORM>.
En el interior de la declaración se indican los elementos (variables) de
entrada. La directiva <FORM>
tiene los parámetros action
y method.
action = "programa"
Indica el programa
que va a "tratar" a las variables que se envien
con el formulario. En nuestro caso enviaremos las variables por correo
electrónico, con lo que el "programa" será "mailto: direccion_de_correo".
method = POST / GET
Indica el método según el que se transferiran las variables. POST produce la modificación
del documento de destino (como en el caso de enviar por correo las variables).
GET no produce cambios en el documento destino (como en el caso de una consulta
a una base de datos, p.ej. una página de búsqueda en
Internet).
Campos de Entrada
Para la introducción de las variables se utiliza la
directiva <INPUT>. Esta
directiva tiene el parámetro type que indica el tipo de variable a introducir y name que
indica el nombre que se le dará al campo. Cada tipo de variable tiene sus
propios parámetros.
type=textname = campo
Indica que el
campo a introducir será un texto. Sus parámetros son :
maxlenght = numero
Numero máximo
de caracteres a introducir en el campo.
size = numero
Tamaño en
caracteres que se mostrará en pantalla.
value =
"texto"
Valor inicial
del campo. Normalmente sera " ", o sea, vacio.
type = passwordname = campo
Indica que el
campo sera una palabra de paso. Mostrará asteriscos
(*) en lugar de las letras escritas.
Sus parámetros opcionales son los mismos que para text.
type = checkboxname = campo
El campo se
elegirá marcando una casilla. Se permite marcar varias casillas. Los valores de
las casillas serán indicados por :
value =
"valor"
checked
La casilla aparecera marcada por defecto.
type = radioname = campo
El campo se elegira marcando una casilla. Solo permite marcar una sola
de las casillas. Los valores de las casillas seran
indicados por :
value =
"valor"
type = imagename = campo
El campo contendra el valor de las coordenadas del punto de la
imagen pinchado. Debe indicarse la imagen con el parámetro :
src =
"archivo de imagen".
type = hiddenname = campo
El usuario no
puede modificar su valor, ya que el campo no es visible se manda siempre con el
valor indicado por el parámetro :
value =
"valor"
type = submit
Representa un
botón. Al pulsar este botón la información de todos los campos se envía al
programa indicado en <FORM>.
Tiene el parámetro value = "texto" que indica el texto
que aparecerá en el boton.
type = reset
Representa un
botón. Al pulsar este botón se borra el contenido de todos los campos. El
parámetro value = "texto" indica el texto que
aparecerá en el botón.
Campos de Seleccion
Este
tipo de campos despliegan una lista de opciones, entre las que debemos escoger
una o varias. Se utiliza para ellos la directiva <SELECT> </SELECT> . Sus parámetros son :
name = campo
Nombre del
campo
size =num
Numero de
opciones visibles. Si se indica 1 se presenta como un menú desplegable, se se indica mas de uno se presenta como una lista con barra
de desplazamiento.
multiple
Permite selecionarmas de un valor para el
campo.
Las
diferentes opciones de la lista se indican con la directiva <OPTION>. Esta directiva puede
incluir el parametroselected para indicar cual es la opcion por defecto. En caso de que no se especifique, se
tomara por defecto la primera opción de la lista.
Areas de texto.
Representa
un campo de texto de múltiples lineas. Normalmente se
utiliza para que se incluyan en el comentarios. La
directiva usada es <TEXTAREA>
</TEXTAREA>, y sus parámetros :
name = campo
Nombre del
campo.
cols = num.
Numero de
columnas de texto visibles.
rows = num.
Numero de
filas de texto visibles.
wrap = VIRTUAL / PHYSICAL
Justifica el
texto automáticamente en el interior de la caja. La opción PHYSICAL envia las lineas de texto
separadas en lineas físicas. La opción VIRTUAL envia todo el texto seguido.
Veamos
a continuación un ejemplo de formulario utilizando todas las formas de introduccion de datos.
<FORM action=
"mailto: cenedic@ucol.mx" method = post >
Tu Nombre:<INPUT type
=textname = nombre size = 30 >
Tu Clave: <INPUT type
= password name = clave size = 8 > <P>
Archivos a Enviar: <INPUT type =checkboxname = archivo value = "Manual"
> Manual de Html <INPUT type =checkboxname = archivo value ="Mapthis" >
Programa Mapthis <INPUT type =checkboxname = archivo value ="Help" >
Archivo de Ayuda <P>
Tu Edad : <INPUT type =
radio name= edad value = "-20" >
Menos de 20 años <INPUT type =
radio name = edad value = "20-40" >
Entre 20 y 40 años <INPUT type =
radio name= edad value = "+40" >
Mas de 40 años <P> <INPUT type =hiddenname = lugar
value = "pagina personal" >
Como encontraste mi página : <SELECTname = donde > <OPTION>De casualidad <OPTION>Por el buscador Ole <OPTION>Por el buscador Yahoo <OPTION>Me la comentaron </SELECT> <P>
Tus Comentarios: <BR> <TEXTAREAname = comentario rows = 5 cols = 40wrap = virtual ></TEXTAREA> <P> <INPUT type =submitvalue =
"Enviar" > <INPUT type =
reset value = "Borrar" > </FORM>
Ahora veamos el efecto
producido en la página Web :
Si rellenas este FORM y pulsas sobre el botón Enviar, (estando
conectado a Internet), se generará un mensaje de correo a mi direccion de correo luisfd@jet.es. Si pulsas el botonBorrar
se borraran los datos que hayas introducido en el Formulario.
El texto que se recibiría por correo electrónico sería parecido a este:
Podemos observar que en el correo se separan las
variables con el símbolo &,
los espacios se sustituyen por el signo +
y se representan los códigos de retorno de carro y avance de línea del campo de
texto con los caracteres %0D
y %0A
respectivamente.
Si
en vez de enviar estas variables por correo electrónico, fuesen enviadas a un
programa (CGI), este programa podría tratarlas y dar como respuesta una nueva
página Web.
IMPORTANTE: La opción mailto: en el parámetro action de la directiva FORM solo funciona correctamente con
aquellos navegadores que tengan incorporado un programa de correo.
Se puede, además, utilizar un Formulario como
"lanzador" de links, es decir, por medio de una lista desplegable permitir
al usuario escoger un Link y acceder a el. Para ello se utiliza el parámetro
"OnClick". Ejemplo :