Los
formularios o también llamados forms, se utilizan para la entrada y envío de
datos (el procesamiento de los mismos es otro asunto) desde una página HTML.
Podremos utilizar formularios para diseñar cuestionarios de todo tipo, por
ejemplo, datos referentes al tipo de usuario que visita nuestra página, para
hacer pedidos de algún producto, encuestas, subscripción a algún tipo de
servicio, etc.
En un formulario podremos solicitar diferentes datos
(campos) cada uno de los cuales quedará asociado a una variable. Una vez
introducidos los valores en los campos, el contenido de éstos será enviado a la
dirección (URL) donde esté el programa que pueda procesar las variables, a este
programa externo se le suele denominar CGI (Common Gateway Interface, Interface
de Compuerta Común).
La marca es <FORM> ... </FORM> cuyos atributos
son:
•
action= "programa" (Acción )
Se
refiere a la acción a realizar cuando se pulsa el botón de envío del
formulario. Esta acción puede ser enviar por correo el contenido del formulario
(action= mailto: <dirección e-mail> o activar algún otro URL, como por
ejemplo un mensaje que nos indique que el envío se ha realizado con éxito.
•
method= POST / GET
Que sirve para especificar el
método según el cual se transferirán las variables. GET lo utiliza por defecto
y no produce cambios en el documento destino, por ejemplo si consultásemos una
base de datos. POST produce la modificación del documento de destino, por
ejemplo, cuando se envían por correo las variables.
La información del formulario
es devuelta en forma de una única lista o cadena compuesta por pares
nombre/valor (NAME/VALUE), es decir, el nombre de cada campo seguido del valor
que tiene. Cada campo se separa con el carácter &.
Campos de entrada
Los elementos de entrada de datos se denotan con la marca
<INPUT> que tiene un atributo type
con varias especificaciones:
•
type=
text ( Campos de texto para
una única línea )
Indica que el campo a introducir
será un texto; se utilizan generalmente para introducir cadenas de texto cortas
como nombres, direcciones, e-mail..
•
name= campo
Define cada campo de un
formulario y es necesario para identificar los valores asignados al mismo a la
hora de procesar la información devuelta.
•
maxlenght= número
Número máximo de caracteres a
introducir en el campo.
•
size= número
La anchura visible del campo en
caracteres.
•
value= "texto"
Valor inicial del campo,
normalmente seráes decir, vacío.
Ejemplo:
< INPUT
type= "text" name="e-mail" maxlenght=300 size = 60>
•
type= password (Campo password )
Indica que el campo será una
palabra de paso, por tanto los caracteres tecleados por el usuario en pantalla
se verán como asteriscos. Sus atributos opcionales son los mismos que para
type= text: name, maxlenght, size y value.
Ejemplo:
< INPUT type="password"
name="clave" size=12 >
•
type= checkbox (Campos de chequeo de opción )
Indica que el campo se elegirá
marcando una casilla, o más de una. El campo aparece como una cajita que puede
estar marcada o no, según se active o desactive respectivamente. Sólo se
devuelve el par nombre/valor correspondiente a un "checkbox" cuando
está activada.
•
value= "valor"
•
name= campo
•
checked: Sirve para iniciar un botón en su
estado activado
Ejemplo:
< INPUT type= "checkbox"
name=activado >
•
type=
radio ( Botones Circulares )
Indica que el campo se elegirá
marcando una casilla y sólo una, siendo los botones circulares. Como sólo se
Puede tomar un valor, todos los elementos de este tipo que pertenezcan a un
mismo grupo, deben tener el mismo valor para name. Sólo el botón seleccionado
será el que genere un par nombre/valor en los datos devueltos del formulario.
•
value="valor"
•
name=campo
Ejemplo:
< INPUT type= "radio"
name="edadf'" value= "menosl7" >
•
type=
range ( Campo para Rangos )
Permite elegir un valor
determinado entre los posibles de un rango delimitado por los tributos mín y
máx. Se puede iniciar con un valor concreto utilizando.
•
value= "valor"
Ejemplo:
< INPUT type= "range" name= nota
min=1 max= 10 >
•
type= image (Campo Imagen )
Indica que el campo contendrá el
valor de las coordenadas del punto de la imagen pinchada, la imagen se indica
con el atributo:
•
src= "fichero de imagen"
Ejemplo:
< INTPUT type=
"image" src= estadistica1.gif
>
•
type= hidden (Campo para Datos Ocultos )
No aparece ningún campo
rellenable por el usuario, sino que se envía algún tipo de información de
interés interno, como por ejemplo, la versión de un programa (si queremos saber
cuál está utilizando el usuario), un identificador de cualquier tipo,
información de estado, etc.
•
value= "valor"
•
name= campo
Ejemplo:
<INPUT
type= "hidden" name= version
value= "2.Oa >
•
type= submit (Botones de envío )
Aparece en forma de botón que es
el que debe pulsarse, una vez lo hemos completado, para enviar la información
del formulario al programa indicado en <form>.
•
value= "texto"
Que indica el texto que aparecerá
en el botón, por ejemplo, Pulse aquí.
•
src=
imagen
Imagen que sustituya al típico
botón.
•
name= campo
Ejemplo:
< INPUT type= "submit" value=
"Enviar" >
•
type=
reset ( Botones de borrado )
Devuelve los campos del formulario
a los valores de inicio especificados. De igual forma que para los botones de
envío tiene los mismos atributos.
•
value= "texto"
Que indica el texto que aparecerá
en el botón, por ejemplo, Pulse aquí.
•
src= imagen
Imagen que sustituya al típico
botón.
•
name= campo
Ejemplo:
< INPUT type= "reset" value=
"Borrar" >
Campos de selección
Este tipo de campos despliegan una lista de opciones, entre
las que deben escoger una o varias. Se utiliza para ellos la marca <
SELECT> ... </SELECT> y sus atributos son :
•
name= campo Nombre del campo.
•
size= número
Número de opciones visibles. Si
se indica uno se presenta como un menú desplegable, si se indica más de uno se
presenta como una lista con barra de desplazamiento.
•
múltiple
Permite seleccionar más de un
valor para el campo.
Las diferentes opciones de la lista se indican con la marca
< OPTION> que puede incluir el atributo:
•
selected
Para indicar cuál es la opción por defecto, si no se
especifica por defecto sale la primera opción de la lista.
Ejemplo:
< SELECT
name= Ciudades >
< OPTION=
Jaen >
< OPTION= Palencia
> < OPTION= Soria > <
OPTION= Lugo >
< /SELECT >
Áreas de texto
Representan un campo de texto de múltiples líneas y aparecen
como una caja. Normalmente se utiliza para que se incluyan en ellas comentarios.
La marca es <TEXTAREA> ... < /TEXTAREA> y sus atributos son :
•
name= campo
Nombre del campo
•
cols= número
Número de columnas de texto
visibles
•
rows= número
Número de filas de texto visibles
•
align= valor
Puede ser
top (arriba), middle (medio), bottom (abajo), left (izquierda) y right
(derecha)
•
wrap= VIRTUAL / PHYSICAL
Justifica el texto
automáticamente en el interior de la caja. La opción physical envía las líneas
de texto separadas en líneas físicas. La opción virtual envía todo el texto seguido.
Ejemplo
< TEXTAREA name= dirección rows= 60 cols
=5> IBM Company Ine.
1221
Beverly Hills. Massachusetts 90876ET 56
< /TEXTAREA >
Ejemplo práctico nº9:
< HTML >
< HEAD >
<
TITLE>Ejemplo 9 - Formularios </TITLE >
< /HEAD >
< BODY >
<FORM action="mailto:lml@um.es" method="post">
Tu Nombre:
<INPUT type=text name=nombre size=30> Tu Clave: <INPUT type=password
name=clave size= 8>
< P >
Archivos a Enviar: <BR>
< INPUT
type=checkbox name=archivo value="Manual" > Manual de Html
< INPUT
type=checkbox name=archivo value="Mapthis">Programa Mapthis <
INPUT type=checkbox name=archivo value="Help" > Archivo de Ayuda
< P >
Tu Edad: <BR>
< 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" > Más de 40 años < P >
< INPUT
type=hidden name=lugar value="página personal" >
¿Cómo encontraste mi página?
< SELECT name=donde >
< OPTION> De casualidad
< OPTION> Por el buscador Ole
< OPTION> Por el buscador Yahoo
< OPTION> Me la recomendaron
< /SELECT
>
< P >
Tus comentarios:
< BR >
< TEXTAREA
name=comentario rows=5 cols=40 wrap=virtual > < /TEXTAREA >
< P >
< INPUT
type=submit value="Enviar"
> < INPUT type=reset value="Borrar" >
< /FORM >
< /BODY >
< /HTML >
