Los formularios dotan a las páginas Web de un conjunto de nuevos elementos capaces de recoger información del lector de una página y enviarla a un servidor HTTP para su posterior procesamiento. De esta forma, se pueden realizar encuestas, recoger pedidos o sugerencias, etc.
La información introducida en un formulario es enviada a un servidor HTTP, que se encarga de recogerla y procesarla. Los formularios se estandarizaron en HTML/2.0, a través de un conjunto de etiquetas y atributos que representan cada uno de los campos de recogida de información. El diseño de un formulario incluye cuatro fases:
El lenguaje HTML define un conjunto de etiquetas que representan cada uno de los campos de recogida de información de un formulario. Los campos disponibles se dividen en cuatro categorías diferentes:
Entrada de bloques de texto <TEXTAREA>: permite introducir múltiples líneas de texto.
Checkboxes <INPUT TYPE=checkbox>: permite seleccionar una o varias opciones de un conjunto de posibilidades.
Radio Buttons <INPUT TYPE=radio>: permite seleccionar una única opción de un conjunto de posibilidades.
Lista de opciones <SELECT>: permite seleccionar una opción, dentro de una lista desplegable de opciones.
Botón Enviar <INPUT TYPE=submit>: botón que al ser activado produce el envío de la información obtenida. Es equivalente a pulsar RETURN en un campo de formulario.
Botón Borrar <INPUT TYPE=reset>: botón que al ser activado elimina toda la información introducida en la página, dejándola en la situación inicial.
A continuación se incluye, a modo de referencia, el conjunto
de etiquetas HTML disponibles para crear formularios. Posteriormente, se
explicará la forma de utilizar cada uno de los elementos. Algunos
de los conceptos y términos que se emplean están relacionados
con la interacción entre clientes y servidores HTTP.
| <FORM>… </FORM> | Crea
un nuevo formulario. Todos los restantes elementos de formulario insertados
dentro de esta etiqueta pareada serán enviados conjuntamente al
servidor para su procesamiento.
Los formularios no se pueden anidar. |
||
| ACTION="…" | URL
de la aplicación CGI encargada de procesar el formulario, p.e. http://www.u.edu/cgi-bin/procesa.
La información se envía codificada; los detalles de esta codificación se encuentran en el próximo capítulo. La URL puede ser un mailto:direccion. De esta forma, la información recogida por el formulario será enviada por correo electrónico a la dirección especificada. Esto es útil si se quiere diseñar un formulario, pero no se dispone de conocimientos suficientes para desarrollar aplicaciones CGI. |
||
| METHOD= | Mecanismo
utilizado para enviar la información del formulario a la aplicación
que lo procesa. Depende del protocolo utilizado en la URL de ACTION.
Para el protocolo HTTP, el más común, puede tomar los valores GET o POST. Para los mailto:, se debe utilizar el método POST. De esta forma, la URL se envía como un attachment MIME del correo. |
||
| ENCTYPE= | Formato
de codificación MIME para la información a enviar.
Por defecto, se emplea application/x-www-form-urlencoded. |
||
<FORM ACTION="mailto:pcorc@macc.unican.es" METHOD=post>
----
</FORM>
| <INPUT> | Inserta cada uno de los diferentes campos de recogida de datos. | ||
| NAME= | Nombre
asignado al campo. Es obligatorio.
Sirve para relacionar el nombre de cada campo con el contenido del mismo, por parte de la aplicación que procesa el formulario. |
||
| TYPE= | Tipo
de campo de entrada. Es obligatorio. Puede tomar los valores:
password: igual que un campo de entrada de texto, salvo que la información que se teclea no aparece en la pantalla (sólo se ven asteriscos). checkbox: campo de selección múltiple. Se debe incluir uno por cada elemento de selección necesario. radio: campo de selección única. Se debe incluir uno por cada elemento de selección necesario. submit: botón de envío de la información del formulario. reset: botón para limpiar el contenido del formulario a sus valores por defecto, cuando se cargó la página por primera vez. hidden: campo oculto. Permite almacenar un valor, pero no se muestra en la pantalla. Sirve para almacenar las variables internas de una aplicación CGI. image: equivalente a submit, salvo que contiene una imagen que hará las veces de botón de envío. |
||
| VALUE= | Valor
inicial que se da al campo, válido para los campos de tipo text.
Es una cadena de caracteres.
Además, su contenido será incluido, en determinadas situaciones, cuando se envía la información del formulario. En los campos submit y reset, contiene el texto que se mostrará en el botón. |
||
| CHECKED | Indica
si un radio o checkbox está seleccionado por defecto.
En un grupo de botones radio, sólo uno se debe definir como seleccionado. |
||
| MAXLENGTH= | Máxima longitud, en caracteres, que puede aceptar un campo de entrada de texto. | ||
| SIZE= | Ancho, medido en caracteres, de las ventanas de texto. Puede ser mayor o menor que MAXLENGTH. | ||
| <TEXTAREA>… </TEXTAREA> | Permite introducir varias líneas de texto. Entre las etiquetas de inicio y final se puede introducir texto, que será utilizado como valor inicial del campo. | ||
| NAME= | Nombre que se da al campo. Es obligatorio. | ||
| COLS= | Número de columnas de texto que ocupará el campo. | ||
| ROWS= | Número de filas de texto que ocupará el campo. | ||
| <SELECT>… </SELECT> | Crea una lista desplegable de opciones. Cada una de las opciones disponibles se crea con la etiqueta <OPTION>. | ||
| NAME= | Nombre asignado al campo. Es obligatorio. | ||
| SIZE= | Número
de entradas visibles simultáneamente de la lista. El valor por defecto
es 1, es decir, sólo se ve una opción y el resto se muestra
en forma de persiana desplegable.
Si se utiliza un valor mayor, se crea una ventana con tantas opciones como el valor de este campo. Para acceder al resto, se utiliza una barra de desplazamiento. |
||
| MULTIPLE | Indica
si se pueden seleccionar varias de las opciones de la lista.
Por defecto, en las listas desplegables sólo se puede seleccionar una opción. Si se utiliza MULTIPLE, será posible, utilizando el ratón y la tecla Control, activar simultáneamente varias opciones. |
||
| <OPTION>… </OPTION> | Define
cada una de las opciones disponibles en un bloque <SELECT>. El texto
que sigue a <OPTION> aparecerá como entrada de la lista desplegable.
No es obligatorio usar la etiqueta de terminación. |
||
| SELECTED | Indica cual de los valores es el presentado inicialmente. Sólo debe definirse uno como seleccionado, salvo que se utilice la opción de selección MULTIPLE. | ||
| VALUE= | Valor
opcional que se proporciona a la etiqueta.
Está relacionado con la información que se enviará al procesar el formulario. Si no existe, se envía el texto que acompaña a <OPTION>. Si existe, se envía este valor. |
||
El proceso de creación de un formulario es muy sencillo; una vez que se identifica la información a solicitar, se elige el conjunto de campos de formulario más adecuado para recogerlo, de acuerdo con la lista anterior. Se deben tener en cuenta las siguientes reglas:
Recogen una o varias líneas de texto, introducidas por el usuario. El más sencillo es la línea de entrada de texto, con la etiqueta <INPUT TYPE="text">. Se tiene control sobre las siguientes opciones:
Se pueden controlar los siguientes parámetros:
Los checkboxes son el mecanysmo adecuado para ofrecer listas de opciones, que pueden ser seleccionadas o no poniendo una pequeña marca en la casilla correspondiente. Cada uno de los checkbox se comporta de forma independiente a los demás. Se crean con la etiqueta <INPUT TYPE="checkbox">.
Las opciones disponibles son:
<BLOCKQUOTE>
<INPUT NAME="opcion1" TYPE="CHECKBOX"
VALUE="libros">Libros<BR>
<INPUT NAME="opcion2" TYPE="CHECKBOX"
VALUE="programas" CHECKED> Programas
</BLOCKQUOTE>
Los botones radio también permiten activar o desactivar opciones; sin embargo, a diferencia de los checkboxes, es posible agrupar varios elementos en un ‘grupo de botones radio’, de forma que sólo es posible elegir una de todas las opciones disponibles.
Para crear un grupo de botones radio, se insertan tantas etiquetas <INPUT TYPE=radio> como opciones existan. Todas ellas deben llevar un NAME igual, pero un VALUE diferente. La agrupación de los botones se realiza por su nombre; por eso, un grupo de botones puede estar distribuido en cualquier posición de un formulario.
Permiten seleccionar una o varias opciones de entre una lista desplegable. La etiqueta <SELECT> crea el campo de selección; dentro del mismo se añaden las diferentes opciones con <OPTION>. El ancho de la ventana de selección se ajusta a la anchura de la opción mayor que se incluya. El número de opciones visibles simultáneamente se controla con el atributo SIZE.
Los formularios pueden incluir dos tipos de botones:
Este puede ser un sistema útil para implementar un menú basado en botones. La aplicación menu.cgi recibirá un parámetro, denominado accion, cuyo valor será la etiqueta del botón activado en el formulario. Por ejemplo:
Los campos HIDDEN sirven para guardar información dentro de un formulario, que permanece oculta al usuario del browser (salvo que vea el código fuente del documento HTML). De esta forma, se almacenan variables internas que pueden informar de operaciones que el usuario ha realizado previamente.
Se emplean, por ejemplo, en el desarrollo de servicios de información interactivos, en los que es necesario conocer la secuencia de pasos que un usuario ha seguido hasta llegar una determinada situación. Como el protocolo HTTP entre los clientes y servidores WWW no guarda ninguna información sobre el estado previo, la inclusión de variables ocultas dentro de un formulario es un posible sistema para conservarlo.
Los campos IMAGE son equivalentes a los botones submit, salvo que permiten utilizar una imagen propia a modo de botón. El atributo SRC= fija la URL de la imagen. Se pueden emplear los atributos de la etiqueta <IMG> para controlar su presentación.
Cuando se envía un formulario a través de un campo IMAGE, la información de las coordenadas del punto de la imagen en que se pulsó es adjuntada con el resto de campos del formulario. Los dos nuevos parámetros se forman uniendo los sufijos .x y .y al nombre del campo IMAGE.
La parte más importante de un formulario (aparte de la aplicación que lo procesa), es conseguir un diseño atractivo y funcional, que se apoye en elementos de HTML para conseguir el efecto de presentación deseado.
Para ello, se debe conseguir una adecuada distribución de los campos de formulario junto con las descripciones de los mismos. Un método útil consiste en el empleo de tablas, de forma que los atributos de alineación de cada una de las celdas se aprovechan para conseguir la adecuada distribución de los elementos.
A continuación se muestra un ejemplo completo de un formulario (hoja de solicitud de cuenta):
