1 Introducci�n

Un formulario permite el env�o de informaci�n desde el cliente hacia el servidor WEB. A trav�s de una serie de controles el usuario puede introducir informaci�n que, debidamente codificada, es enviada hacia el servidor. �ste pasa la informaci�n a un programa (denominado programa CGI) que la procesa y produce unos resultados que se env�an al servidor, que a su vez se los env�a al cliente (v�ase figura).

Un formulario se puede utilizar, por ejemplo, para:

• Realizar b�squedas en bases de datos
• Rellenar cuestionarios
• Solicitar informaci�n sobre un tema
• Inscribirse en una lista de distribuci�n
• Crear un libro de firmas
• Colocar un contador de visitas a la p�gina

Los formularios se crean mediante el elemento FORM. Como ejemplo, sea un formulario simple.

Dentro del formulario existen varios tipos de controles para recoger la informaci�n. En el ejemplo aparecen cinco de ellos: una caja de verificaci�n, unos botones de radio, un men� desplegable, un campo de texto y un recuadro de texto. Por otra parte, dos controles especiales realizan las acciones de enviar los datos al servidor o borrar los datos introducidos y restablecer los valores por defecto si los hubiera.

La URL del programa encargado de procesar los datos recogidos por el formulario se especifica mediante el atributo ACTION del elemento FORM. El programa debe encontrarse en un directorio concreto del servidor, de nombre /cgi-bin, y debe estar dise�ado de acuerdo con el formulario.

As� pues, en un formulario hay que distinguir dos partes igualmente importantes: el documento HTML con el elemento FORM y el programa CGI que procesa los datos. Veamos cada uno de ellos con m�s detalle, comenzando por el primero de ellos.

El elemento FORM permite crear un formulario dentro de un documento HTML. Sus atributos son los siguientes:

• ACTION: URL del programa encargado de procesar la informaci�n recogida con el formulario.
• METHOD: m�todo utilizado para enviar los datos. Existen dos m�todos: GET y POST.
• ENCTYPE: tipo MIME utilizado para codificar la informaci�n cuando se utiliza el m�todo POST. El valor por defecto es "application/x-www-form-urlencoded", y el otro valor posible es "multipart/form-data".
• TARGET: nombre del frame donde se va a visualizar la informaci�n devuelta por el servidor. Funciona igual que en el elemento ancla de hipertexto A.

Dentro del elemento FORM existen varios elementos para la entrada de datos. Cada elemento de entrada tiene un nombre, dado por el atributo NAME, y un valor, dado por el atributo VALUE. Si este �ltimo atributo no est� presente se tomar� como valor del elemento el introducido por el usuario.

Igualmente, dentro del elemento FORM tambi�n pueden aparecer otros elementos como listas, encabezados, tablas, etc, para dar el formato deseado al formulario.

Los elementos que se pueden utilizar para introducir datos en un formulario son los siguientes:

• INPUT
• SELECT
• TEXTAREA

Elemento INPUT

INPUT especifica varios tipos de controles para la entrada de datos. El tipo se especifica con el atributo TYPE, que puede tomar los siguientes valores:

• BUTTON: bot�n. Se utiliza �nicamente para invocar un script contenido en el documento, como se ver� en el cap�tulo siguiente. El valor asociado a �l no se env�a al servidor.
  
  

  <INPUT TYPE="button" NAME="boton" VALUE="�p�lsame!">

• CHECKBOX (caja de verificaci�n): recuadro que puede estar activado (on) o desactivado (off). Por defecto est� desactivado, a no ser que aparezca el atributo CHECKED (que carece de valor). El atributo VALUE establece el valor asignado a la caja de verificaci�n cuando este est� activado; si no existe, se toma el valor por defecto on. Pueden existir varias cajas de verificaci�n con el mismo nombre, con lo cual se asignan distintos valores a una misma variable. Esto es conveniente cuando se quieren seleccionar varias opciones que no son mutuamente excluyentes.
  
  

  <INPUT TYPE="checkbox" NAME="caja" VALUE="opcion1" CHECKED>Opci�n 1 <INPUT TYPE="checkbox" NAME="caja" VALUE="opcion2">Opci�n 2 <INPUT TYPE="checkbox" NAME="caja" VALUE="opcion3">Opci�n 3

  Opci�n 1 Opci�n 2 Opci�n 3

• FILE: lista de selecci�n de ficheros, que permite al usuario seleccionar un fichero para enviar al servidor. Este tipo s�lo se permite cuando el atributo ENCTYPE del elemento FORM tiene el valor "multipart/form-data".
  
  

  <INPUT TYPE="file" NAME="ficheros">

• HIDDEN: el elemento de entrada no se muestra al usuario, aunque su contenido se env�a al servidor. Es �til para pasar informaci�n entre el cliente y el servidor, y se utiliza t�picamente para guardar el estado de la interacci�n cliente-servidor.
• IMAGE: imagen activa, similar al mapa sensible del lado del servidor.
• PASSWORD: l�nea de texto en la que en lugar del texto tecleado aparecen asteriscos. Se utiliza para introducir palabras clave (passwords).
  
  

  Clave de acceso: <INPUT TYPE="password" NAME="clave">

  Clave de acceso:

• RADIO: bot�n de radio. Los botones de radio tienen sentido cuando hay m�ltiples botones con el mismo nombre. Todos est�n enlazados, de manera que al activar uno de ellos los dem�s se desactivan. S�lo un bot�n puede estar activado a la vez.
  
  

  <INPUT TYPE="Radio" NAME="boton" VALUE="opcion1" CHECKED>Opci�n 1 <INPUT TYPE="Radio" NAME="boton" VALUE="opcion2">Opci�n 2 <INPUT TYPE="Radio" NAME="boton" VALUE="opcion3">Opci�n 3

  Opci�n 1 Opci�n 2 Opci�n 3

• RESET: bot�n de reset, que borra todos los datos introducidos en el formulario y restablece los valores por defecto.
  
  

  <INPUT TYPE="reset" NAME="borrar" VALUE="Borrar formulario">

• SUBMIT: bot�n de env�o. Al pulsarlo, se env�an los datos del formulario a la URL especificada.
  
  

  <INPUT TYPE="submit" NAME="enviar" VALUE="Enviar formulario">

• TEXT: l�nea de texto. El atributo SIZE opcional permite indicar su tama�o.
  
  

  Introduzca la cadena a buscar: <INPUT TYPE="text" NAME="texto" VALUE="valor por defecto">

  Introduzca la cadena a buscar:

Otros atributos del elemento INPUT son los siguientes:

• NAME: nombre asociado al elemento de entrada. El par nombre/valor se enviar� al servidor para su procesamiento.
• ALIGN: alineaci�n de la imagen respecto al texto (s�lo v�lido para TYPE="IMAGE"). Puede tomar los valores bottom, left, middle, right y top.
• CHECKED: s�lo v�lido para TYPE="CHECKBOX" y TYPE="RADIO", indica que una caja de verificaci�n o un bot�n de radio est�n seleccionados inicialmente. En el caso de varios botones de radio enlazados, s�lo uno de ellos puede tener este atributo.
• MAXLENGTH: s�lo v�lido para TYPE="TEXT" y TYPE="PASSWORD", indica el n�mero m�ximo de caracteres de la caja de texto. Puede ser mayor que el tama�o de la caja, en cuyo caso el texto se desplazar� dentro de ella. Por defecto, este valor es ilimitado.
• SIZE: s�lo v�lido para TYPE="TEXT" y TYPE="PASSWORD", indica el tama�o de la caja que contiene al texto.
• SRC: s�lo v�lido para TYPE="IMAGE", contiene el URL de la imagen a incluir.
• VALUE: valor inicial del elemento de entrada. Es obligatorio para TYPE="RADIO".
• HSPACE: v�lido para TYPE="IMAGE", especifica el espaciado horizontal a izquierda y derecha de la imagen.
• VSPACE: v�lido para TYPE="IMAGE", especifica el espaciado vertical encima y debajo de la imagen.

Elemento SELECT

SELECT muestra una lista de valores, especificados mediante el elemento OPTION, y permite seleccionar uno de ellos. Tiene el aspecto de un men� desplegable y su sintaxis es la siguiente:

    <SELECT NAME=nombre>
       <OPTION SELECTED>Opci�n 1
       <OPTION>Opci�n 2
       <OPTION>Opci�n 3
       <OPTION>Opci�n 4
       <OPTION>Opci�n 5
    </SELECT>

Atributos de SELECT:

• MULTIPLE: permite seleccionar m�s de un elemento de la lista. Si no est� presente este atributo, s�lo se puede seleccionar uno.
• NAME: nombre de variable asociado al elemento SELECT.
• SIZE: n�mero de l�neas a mostrar en pantalla. Por defecto es 1, por lo que la lista se presenta como un men� desplegable. Si es mayor de 1, aparecer�n usualmente barras de desplazamiento. Si est� presente el atributo MULTIPLE el valor por defecto es mayor de 1 para permitir la selecci�n de varios elementos.

El atributo SELECTED de OPTION indica el valor por defecto. S�lo puede haber una, a no ser que el elemento SELECT tenga el atributo MULTIPLE. El usuario puede deshacer la selecci�n por defecto. Otro atributo de OPTION es VALUE, que indica el valor asignado a la opci�n. Si no existe, se toma el propio contenido del elemento OPTION como valor.

    <SELECT MULTIPLE SIZE=3 NAME=nombre>
       <OPTION SELECTED>Opci�n 1
       <OPTION>Opci�n 2
       <OPTION>Opci�n 3
       <OPTION>Opci�n 4
       <OPTION>Opci�n 5
    </SELECT>

Elemento TEXTAREA

Permite introducir un bloque de texto a trav�s de una ventana de texto con barras de desplazamiento. El tama�o de la ventana se especifica con los atributos ROWS y COLS. El texto puede tener un tama�o ilimitado, y no pasa a la siguiente l�nea al llegar al final de la ventana, siendo necesario para ello introducir un retorno de carro manual.

    <TEXTAREA COLS=50 ROWS=5 NAME=nombre>
       El contenido inicial del elemento TEXTAREA es el
       valor inicial del texto. Puede contener c�digos
       HTML, que no son interpretados
    </TEXTAREA>

Atributos de TEXTAREA:

• COLS: n�mero de columnas de texto de la ventana.
• NAME: nombre de variable asociado al elemento TEXTAREA.
• ROWS: n�mero de l�neas de texto de la ventana.

Un programa CGI es un programa que se ejecuta en el servidor web y que habitualmente toma como par�metros de entrada los datos introducidos desde un formulario. Mediante programas CGI se puede ampliar de manera pr�cticamente ilimitada el tipo de operaciones que se pueden realizar desde una p�gina web.

El modo de operaci�n de un programa CGI situado en el servidor es el siguiente:

1. El programa CGI recibe la informaci�n que le env�a el cliente web a trav�s de las variables de entorno (m�todo GET) o a trav�s de la entrada est�ndar (m�todo POST). Tambi�n es posible que un programa CGI no necesite recibir datos para cumplir su misi�n.
2. La informaci�n se extrae y se procesa adecuadamente.
3. El programa CGI genera un documento HTML con los resultados de la operaci�n y lo env�a de vuelta al cliente web.

El programa puede procesar �l mismo los datos recibidos, o bien pasarlos a otro programa, como por ejemplo una aplicaci�n de consulta de bases de datos; en este caso act�a como intermediario o pasarela entre el cliente web y la aplicaci�n externa (de aqu� la palabra Gateway del nombre CGI).

Un programa CGI puede estar escrito en cualquier lenguaje de alto nivel (como C, C++, Java, etc.) o lenguaje de script (como el Perl) capaz de leer datos de la entrada est�ndar, de acceder a las variables de entorno y de escribir en la salida est�ndar.

Paso de par�metros al programa CGI

Un programa CGI puede ser llamado directamente, mediante un elemento ancla de hipertexto A:

   <A HREF="programa_cgi?datos">Ejecuci�n del programa</A>

El programa recibe los datos en la variable de entorno QUERY_STRING, que contendr� todo lo que viene detr�s del s�mbolo ? en la URL (en el ejemplo, la cadena "datos").

La cadena que sigue al signo ? se codifica de acuerdo con unas reglas determinadas: los espacios en blanco se sustituyen por el s�mbolo + y los caracteres especiales se codifican en hexadecimal de la forma %xx, siendo xx el c�digo hexadecimal del car�cter. El programa CGI deber� decodificar el contenido de QUERY_STRING para obtener sus datos de entrada.

Otra posibilidad es enviar los datos de la siguiente forma:

   <A HREF="programa_cgi/datos">Ejecuci�n del programa</A>

En este caso los datos se reciben en la variable de entorno PATH_INFO, que en el ejemplo contendr� la cadena "/datos".

Cuando el usuario pulsa el bot�n de enviar de un formulario se manda al servidor una cadena de la forma

nombre=valor&nombre=valor&nombre=valor...

donde nombre es el valor del atributo NAME de cada uno de los elementos de entrada, y valor el valor de los correspondientes atributos VALUE, o bien los datos introducidos por el usuario. El programa CGI deber� decodificar esta cadena, que se encuentra codificada seg�n las reglas expuestas anteriormente, y descomponerla para averiguar el valor asociado a cada una de las variables.

La forma en que el programa CGI accede a los datos enviados desde el formulario depende del m�todo utilizado para el env�o de los mismos. El m�todo se especifica mediante el atributo METHOD del elemento FORM, que puede tomar los dos siguientes valores:

• M�todo GET: el programa CGI recibe los datos en la variable de entorno QUERY_STRING.
• M�todo POST: el programa CGI recibe los datos a trav�s de la entrada est�ndar.

Por ejemplo, un programa escrito en lenguaje C acceder�a a los datos enviados desde el formulario de la siguiente manera:

La p�gina resultante se env�a a trav�s de la salida est�ndar. En ella suele incluirse una cabecera para indicar el contenido del documento, que puede ser un documento HTML directamente, o bien una referencia a un documento HTML. El contenido de la cabecera es, respectivamente:

1. Documento HTML:
   Primera l�nea: Content-type: tipo/subtipo
   Segunda l�nea: (en blanco)
2. Referencia a un documento HTML:
   Primera l�nea: Location: URL_doc
   Segunda l�nea: (en blanco)

Donde tipo/subtipo es el tipo MIME del documento devuelto (por ejemplo, text/html o text/plain), y URL_doc es la URL del documento ya existente. En este �ltimo caso, el programa CGI no construye el documento-respuesta, sino que recupera un documento almacenado y lo env�a al cliente web.

Ejemplo 1: Examen de HTML

Este formulario permite evaluar los conocimientos sobre una materia, en este caso el lenguaje HTML. Utiliza el programa CGI http://www.lsi.us.es/cgi-bin/exa_html

Ejemplo 2: Elecci�n de vivienda

Este formulario permite buscar una vivienda. Utiliza el programa CGI http://www.lsi.us.es/cgi-bin/mi_casa2

Ejemplo 3: Contador de visitas

Este es un t�pico contador de visitas.

    <IMG SRC="http://www.lsi.us.es/cgi-bin/Count.cgi?df=contador.form"
       ALT="contador">
    

En el ejemplo del contador, el documento devuelto por el programa CGI es una imagen, por lo cual la llamada al programa se realiza desde el atributo SRC de un elemento IMG. El par�metro pasado al programa, "df=contador.form", indica el nombre de un fichero de datos. Este fichero contiene un n�mero. Cuando se ejecuta el programa, se incrementa este n�mero, se construye una imagen con los iconos de los d�gitos correspondientes, y se env�a al cliente web.

Por su parte, el programa CGI http://www.lsi.us.es/cgi-bin/chequea es un simple programa de comprobaci�n de formularios. Produce como salida una lista con los valores introducidos desde el formulario. Se puede utilizar para comprobar el correcto funcionamiento de cualquier formulario que hayamos dise�ado.