Actualizado el 14-01-2007
versión para imprimir
Formularios ( I )
¿ Que es un formulario ?
Los formularios son métodos mediante los cuales los visitantes de una página web pueden enviar datos a su autor.
Se dice que son la principal manifestación de interactividad en el HTML tradicional, pues invierte la trayectoria de los datos, siendo el visitante el que remite información a la página. Naturalmente existen en la actualidad otras manifestaciones de interactividad en la web a traves de los scripts del lado cliente y servidor.
Existen varias formas en las que la información incluida en un
formulario puede llegar a su destino. Las dos mas usuales son por via e-mail a la dirección especificada por el autor de la página, o mediante un CGI (common gateway interface), programa habitualmente escrito en perl que recibe y procesa los datos.
El único sistema al alcance de todo autor es el primero, via
e-mail. El manejo de CGI requiere que el servidor donde está alojada nuestra
página lo permita. Normalmente por obvias razones de seguridad, los proveedores de alojamiento en internet son reacios a permitir a los autores acceso a la programación del servidor, aunque todos ellos, incluso los alojamientos facilitados por proveedores de espacio gratuito, suelen disponer de CGI genericos.
Nosotros estudiaremos aqui solamente la remisión de datos de
formularios via e-mail.
la etiqueta <form>
Esta etiqueta encierra al resto de etiquetas que pueden componer el formulario. Dispone de los siguientes atributos:
method= especifica la forma en la que los
datos del formulario son enviados. Sus valores son post y get.
Cuando el método es get, los datos son enviados al servidor como una petición HTTP GET, añadidos a la url
especificada mediante el atributo action; por ejemplo:
http://url_que_gestiona_datos?nombre_formulario=datos_remitidos
Los datos asi remitidos tienen un doble límite. Como se envian dentro de una url, deben utilizarse unicamente carácteres ascii, y su longitud esta limitada a la longitud de la url que el servidor pueda manejar. La regla general es la de no utilizar el método get si esperamos recibir carácteres no ascii o datos de mas de 100 caracteres.
Con el método post, los datos son enviados como una petición HTTP POST, en el cuerpo de la petición. El método usual es
post.
action indica el destino de los datos. Aqui es donde debe especificarse una cuenta de correo o un programa procesador CGI.
enctype=, se usa cuando se ha especificado method=post, para determinar el sistema de encriptación. Por defecto, si no se incluye este atributo se enviará el formulario con el tipo MIME. Si se desea no incluir encriptación ninguna, deberá indicarse "text/plain".
Otros atributos de <form>
son accept= que permite especificar los carácteres admisibles, y
target= que permite indicar el frame donde se presentan
los resultados, si los hay.
Veamos un ejemplo:
<html> <head> <title>mi formulario</title> </head> <body> <form method="post" action="mailto:webmaster@ignside.net" enctype="text/plain"> </form> </body> </html>
Observa que indicamos que remita los datos a nuestra cuenta de correo con la
etiqueta ya conocida mailto:.
Si quisieramos enviar los datos a mas
de una cuenta, podriamos hacerlo separando las direcciones con comas.
La etiqueta <input>
La etiqueta input es la que permite al usuario meter los datos a
enviar; estos datos pueden ser variados: texto, seleccion de una entre varias
posibilidades, seleccion de varias entre varias posibilidades, etc. Las iremos
viendo a continuación.
<input type="text"/>
Mediante esta etiqueta, la mas simple, permitimos la entrada de texto por el usuario. Su sintaxis básica es la siguiente:
<form> <input type="text" /> </form>
y este el resultado:
La etiqueta <input> necesita indicar un nombre (name=) identificativo. Por ejemplo:
<form> <input type="text" name="remitente" /> </form>
Cuando el visitante rellena el campo del formulario, por ejemplo, Juan Pérez,
esta cadena de texto se convierte en el valor de entrada (input value) y será
emparejada en el procesamiento con el valor del atributo name=.
En nuestro caso, el resultado seria:
remitente = Juan
Pérez
Si lo deseamos, podemos presentar al usuario un valor por
defecto, simplemente rellenando el atributo value="":
<form> <input type="text" name="remitente" value="Juan Pérez"/> </form>
Y obtenemos:
información "por defecto" que sería la enviada y procesada para el identificativo "remitente" si no es sustituida por el usuario.
Podemos añadir otros atributos, para especificar la longitud del campo de introducción de datos, y especificar el numero máximo de carácteres que puede teclear el usuario:
<form> <input type="text" name="remitente" value="" size="35" maxlength="10" /> </form>
Y tendremos:
intenta escribir mas de 10 caracteres ...
Otros <input type=""
PASSWORD. Muy similar al anterior:
<form> <input type="password" name="contraseña" size="35" maxlength="10" /> </form>
La única diferencia es que el texto introducido no se visualiza en la
pantalla, viendose en su lugar los típicos asteriscos (****). Ojo, el texto no es
enviado de forma encriptada, asi que es una pobre medida de seguridad.
HIDDEN: se trata de un campo oculto, y como tal, no sirve para
que el usuario remita información. Su contenido es el predispuesto por el autor
del formulario. Su uso habitual es el de introducir identificativos, que
permitan mas fácil proceso de la información, útil cuando se manejan muchos
formularios.
SUBMIT: no genera un campo de entrada, sino un botón,
y es el que, al pulsarlo, ordena el envio de la información a su destino.
<form> <input type="submit" value="Enviar consulta" /> </form>
IMAGE: igual que submit, si bien en lugar de sobre un botón,
se pulsa sobre una imagen. Requiere el atributo src="" donde
indicamos la localización de la imagen
RESET: presenta un botón
que, al ser pulsado, borra todos los campos del formulario.
<form> <input type="text" name="remitente" value="escribe algo aqui" /> <input type="reset"> </form>
FILE: permite subir ficheros al servidor de la pagina web. Vemos que en el botón aparece la palabra examinar, que ayuda a la selección del archivo a subir
<form> <input type="file" name="cualquierarchivo"> </form>