Formularios

Los formularios son una respuesta que aporta el lenguaje HTML a la necesidad de interactuar con el usuario. ¿Quién no ha rellenado más de un formulario en papel? Con algunas directivas de HTML, crear formularios para que sean publicados en web es relativamente fácil.

El alma mater del formulario es simplemente un fichero que se rellena de información gracias a diferentes opciones estandarizadas como, por ejemplo, casillas de verificación, listas de selección, botones de acción, cajas de texto, etc. No obstante, para realizar la acción de interactuar con el usuario hará falta un elemento externo, que en la gran mayoría de los casos será un programa (script) que se ejecutará en un espacio determinado de un servidor reservado para ello. Este programa se llama CGI, del cual hablaremos al finalizar este apartado.

Un formulario describirá mediante etiquetas de HTML las zonas en las que el usuario podrá rellenarlo. Cada una de estas zonas se identificarán con nombres simbólicos, que le servirán al CGI para interpretar de forma correcta las cadenas del campo con su valor correspondiente.

Hoy día aún no es posible llevar un control exhaustivo de la edición de los formularios en tiempo real, es decir, no se puede comprobar la coherencia de los datos que se incorporan a los formularios o, por ejemplo, avisar al instante de que se ha dejado un campo vacío que era obligatorio. Esto se debe a que la transacción de la información se efectúa una sola vez, cuando el usuario pulsa el botón de envío. Si hay errores o campos no rellenados cuando se requiere que contengan información, será el programa CGI el que se encargue de hacer las comprobaciones y validar el formulario, o mostrar una pantalla de error al cliente (especificando cuál es). El proceso de respuesta de un CGI puede complicarse tanto como queramos y, por ejemplo, hacer que se encargue de devolver al usuario una pantalla de conformidad con los datos introducidos y dando las gracias.

Podemos "clasificar" los diferentes elementos con los que podemos contar para elaborar un formulario:

• Una clase input que se aplicará a diferentes campos de entrada de datos:

  »» Campos de edición, donde encontraremos los campos para la introducción de texto y los campos de texto oculto.

  »» Botones de acción, como por ejemplo el de sumisión (submit) o envío, el de borrado de los datos introducidos en los diferentes campos del formulario (reset), casillas de verificación (checkbox), y botones de selección (radio).

• Una clase select que se aplicará a las listas:

»» Menús desplegables con diferentes opciones y formatos.

»» Listas con barras de desplazamiento, ya sea en formato de lista simple o de campo de texto largo.

A continuación, analizaremos las diferentes etiquetas que nos permitirán llevar a la práctica nuestro formulario, sin codificar, no obstante, un programa CGI para especificar la acción que hay que realizar cuando se quiera enviar. Para hacer esto, tendríamos que adentrarnos en la programación en diferentes lenguajes, lo cual es un ámbito no adecuado al contenido de la asignatura. En todo caso, haría falta una asignatura específica para ello. Si se quiere asociar un formulario a un CGI, lo mejor que se puede hacer es contactar con algún programador o webmaster que gestione un servidor, con el objetivo de que nos proporcione las pautas para llevarlo a cabo si no sabemos programar en ningún lenguaje.

En este sentido, si lo que estamos haciendo son las páginas de una sede web personal, tendremos que contactar con el administrador del servidor de nuestro proveedor de servicios Internet, para confirmar si aceptará o no estos programas. Muchos distribuidores ya ofrecen una serie de CGI para que sus usuarios los invoquen.

Para hacer efectivo el uso del formulario, nos remitiremos a un método que no implique la invocación de ningún proceso de servidor, sino que mediante un METHOD POST haremos que el formulario que se genere pueda ser enviado por correo electrónico a la dirección designada. La fórmula que aplicaremos será:

<FORM ACTION="mailto:dirección de correo electrónico" METHOD="POST ">

Las diferentes etiquetas para definir el formulario serán:

• <FORM> ... </FORM>: esta etiqueta marca el inicio y el final del formulario, y dentro de estas dos etiquetas incluiremos los diferentes campos que formen parte del formulario. Lleva asociados dos atributos básicos:

»» El atributo METHOD, que especifica el modo del protocolo HTTP para enviar datos del formulario al servidor web. Los métodos asociados a éste son GET y POST. El primero está activado por defecto, y añade una cadena de caracteres, con los datos introducidos en el formulario, al final del URL de la página solicitada. El servidor web utiliza los datos anexados para identificar y ejecutar el programa adecuado. Por ejemplo, si solicitamos una búsqueda concreta por palabra, el método GET especificará las palabras que hay que buscar.

El segundo método, POST, envía una cadena de caracteres al servidor sin añadirlos al URL. Este método se utiliza cuando no es necesaria la interacción con el usuario, sólo se envían los datos a un objeto del servidor y no es precisa una respuesta. Algo así se puede utilizar para confeccionar listas de distribución donde sólo hace falta que la gente interesada se apunte con su dirección de correo electrónico. Estos datos se almacenan en el servidor para confeccionar una lista completa con las diferentes entradas.

»» El atributo ACTION tiene la función de indicar la acción que se debe llevar a cabo cuando se envía un formulario. ACTION define el URL del programa que permite tratar los datos del formulario.

De este modo, la sintaxis inicial de apertura de un formulario es:

<FORM ACTION="URL del programa o script" METHOD="tipo de método (GET o POST)" >

Todas las etiquetas pueden llevar asociados diferentes atributos de forma común. Son los que vemos a continuación:

• Atributo NAME="nombre de la variable": define un nombre que permitirá al CGI, en el momento en que se le envíen los datos, identificar su origen.
• Atributo VALUE="valor de campo": para un campo de texto, permite definir su contenido; para un botón de acción (submit, reset), indica el texto que se escribe en el mismo botón; para un botón de tipo checkbox, indica el valor asociado al botón cuando esté marcado, y para un botón de tipo radio, indica el valor asociado al botón si está activado por defecto.

Ahora repasaremos las diferentes etiquetas utilizadas para crear un formulario:

• <INPUT>: es la etiqueta general que nos permitirá definir todos los elementos de la clase input. Si no lleva atributo asociado, definirá por defecto una zona de entrada de texto simple.

<INPUT NAME="caja">

Los atributos que definen los diferentes formatos son:

»» TYPE="...": indica los diferentes valores o las distintas formas que se reflejarán en el formulario, como por ejemplo:

• Submit: es el botón que desencadena el envío de todos los datos del formulario hacia el CGI que lo tratará. El atributo VALUE definirá el texto que aparecerá en el botón:

<INPUT TYPE="submit" VALUE="Enviar los datos">

El INPUT de tipo submit no necesita el atributo NAME porque el programa no utiliza datos específicos para este botón, ya que sólo se dedica a realizar la acción de envío de los datos.

• Checkbox: permite definir uno o varios valores que se atribuirán a una misma variable (definida por NAME).

Por ejemplo, definiremos un campo de selección sobre los diferentes lenguajes de marcado que conozca el usuario:

<INPUT TYPE="checkbox" NAME="lenguajes" VALUE="SGML">SGML<BR>
<INPUT TYPE="checkbox" NAME="lenguajes" VALUE="HTML">HTML<BR>
<INPUT TYPE="checkbox" NAME="lenguajes" VALUE="XML">XML<BR>

SGML
HTML
XML

• Radio: permitirá seleccionar sólo una opción de entre n opciones. Siguiendo con nuestro ejemplo, pediremos al usuario que indique si tiene conocimientos previos de programación:
  

<INPUT TYPE="radio" NAME="programación" VALUE="si">SÍ<BR>
<INPUT TYPE="radio" NAME="programación" VALUE="no"CHECKED>NO<BR>



Sí
No

Como podemos observar, la opción "No" está marcada por defecto, y cambia automáticamente si seleccionamos la opción "Sí". Esto es posible gracias al atributo CHECKED.