9. FORMULARIOS

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 éstos 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 un programa externo en algún lenguaje de programación como PERL, C++ o Visual Basic. A este programa externo se le suele llamar CGI (Common Gateway Interface). La creación de este tipo de programas excede a este manual, 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 instrucciones <FORM></FORM>. En el interior de la declaración se indican los elementos (variables) de entrada. La instrucción <FORM> tiene los siguientes parámetros:

action = "programa". Indica el programa que va a "tratar" a las variables que se envíen con el formulario. En nuestro caso enviaremos las variables por correo electrónico, con lo que el "programa" será "mailto: direccion_de_correo".
method ="valor". Indica el método según el que se transferirán las variables. Su valores son: (post) que produce la modificación del documento de destino (como en el caso de enviar por correo las variables), y (get)que 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).

9.1. Campos de Entrada

Para la introducción de las variables se utiliza la instrucción <INPUT>. Esta instrucción 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="text" name ="campo". Indica que el campo a introducir será un texto. Sus parámetros son :
* maxlenght ="numero". Número 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 será " ", o sea, vacío.

type ="password" name ="campo". Indica que el campo será una contraseña. Mostrará asteriscos (*) en lugar de las letras escritas. Sus parámetros opcionales son los mismos que para text.

type ="checkbox" name ="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 aparecerá marcada por defecto.

type ="radio" name = "campo". El campo se elegirá marcando una casilla. Solo permite marcar una sola de las casillas. Los valores de las casillas serán indicados por :
* value = "valor"

type ="image" name ="campo". El campo contendrá el valor de las coordenadas del punto de la imagen pinchado. Debe indicarse la imagen con el parámetro :
* src = "fichero de imagen".

type = "hidden" name ="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 botón.

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.

9.2. Campos de Selección

Este tipo de campos despliegan una lista de opciones, entre las que debemos escoger una o varias. Se utiliza para ellos la instrucción <SELECT> </SELECT> . Sus parámetros son :

name ="campo". Nombre del campo
size ="número". Número de opciones visibles. Si se indica 1 se presenta como un menú desplegable, si se indica más de uno se presenta como una lista con barra de desplazamiento.
multiple. Permite seleccionar más de un valor para el campo.

Las diferentes opciones de la lista se indican con la instrucción <OPTION>. Esta instrucción puede incluir el parámetro selected para indicar cual es la opción por defecto. En caso de que no se especifique, se tomará por defecto la primera opción de la lista.

9.3. Áreas de Texto

Representa un campo de texto de múltiples líneas. Normalmente se utiliza para que se incluyan comentarios. La instrucción usada es <TEXTAREA> </TEXTAREA>, y sus parámetros :

name ="campo". Nombre del campo.
cols ="número". Numero de columnas de texto visibles.
rows = "número". Numero de filas de texto visibles.
wrap ="valor". Justifica el texto automáticamente en el interior de la caja. El valor (phisical) envía las líneas de texto separadas en líneas físicas. El valor (virtual) envía todo el texto seguido.

Veamos a continuación un ejemplo de formulario utilizando todas las formas de introducción de datos.

Si se rellenase este formulario y se pulsa sobre el botón Enviar, (estando conectado a Internet), se generará un mensaje de correo a la dirección de correo especificada. Si se pulsa el botón Borrar se borraran los datos que haya 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.

NOTA: El envio por correo electrónico solo funciona correctamente con Netscape. En Microsoft Explorer esta opción da como resultado un correo en blanco. Para enviar un formulario por e-mail sin importar el visor utilizado se ha de utilizar un programa externo que realice este proceso. De todos modos vamos a insertar el código anterior a nuestra página form.htm, para ver el efecto sin insertar el boton enviar: