Formularios (Forms)

Entramos ahora en la descripción del elemento más novedoso del HTML 2.0 respecto a las versiones anteriores: los formularios.

Un formulario es una plantilla para representar un conjunto de datos, el método de enviarlos y el URI de la acción asociada (referencia al programa que va a realizar el proceso de los datos).

El conjunto de datos resultante después de la edición de los campos por el usuario se emplea para acceder a un servicio de información, en función del método y la acción asociada especificados.

El conjunto de datos es una secuencia de campos con pares nombre/valor. Los nombres se especifican en los atributos NAME de los elementos de entrada del formulario y los valores toman un valor inicial empleando distintos marcados, que luego pueden ser editados por el usuario.

Los formularios pueden mezclarse con elementos de definición de bloques, por ejemplo, un elemento <PRE> puede contener un <FORM> y al revés, un <FORM> puede contener listas. Esto permite gran flexibilidad a la hora de diseñar el aspecto de los formularios.

Es importante señalar que la utilidad de los formularios está limitada al uso de las páginas junto con servidores (o al menos con acceso a la red, ya que también se pueden enviar por correo electrónico), ya que las acciones asociadas son programas (generalmente scripts de CGI). Estos programas deben funcionar en un servidor (al que se le proporcionan los datos del formulario, para ser procesados), aunque hay algunos navegadores capaces de invocar guiones locales.

Veamos los elementos de los formularios y la forma de enviarlos:

1. Elementos de un Formulario
2. Envío de Formularios

Elementos de un Formulario

Dentro de un formulario podemos encontrar los siguientes elementos:

• Declaración del formulario (FORM)
• Campos de entrada (INPUT)
• Campo de selección (SELECT)
• Área de texto (TEXTAREA)

A continuación vamos a describir cada uno de los elementos y sus atributos correspondientes.

Declaración del Formulario (FORM)

La declaración del formulario se pone entre las marcas <FORM> y </FORM>.

En su interior aparecen una secuencia de elementos de entrada (input elements), junto con elementos de marcado de estructura del documento.

En la definición del formulario se pueden incluir los siguientes atributos:

• ACTION. Especifica el URI de la acción asociada al formulario. Si no se especifica, por defecto se asume que el URI es el BASE del documento.
• METHOD. Indica el método de acceso al URI de la acción. El conjunto de métodos aplicables es función del esquema del URI. Se pueden emplear los métodos GET y POST, que se describirán más adelante.
• ENCTYPE. Especifica el tipo de codificación para el transporte de los pares nombre/valor, excepto en los casos en los que el protocolo no imponga uno. Trataremos este tema en el punto referido a la codificación de los formularios.

Campo de Entrada (INPUT)

El elemento <INPUT> representa un campo de entrada de datos. Los atributos posibles del elemento vienen dados por el valor del atributo TYPE, que determina el tipo de entrada.

Los tipos de entrada son:

• Texto: INPUT TYPE=TEXT.

  Valor por defecto del atributo TYPE, indica que la entrada es una sola línea. Necesariamente los elementos de este tipo deben incluir el atributo NAME, que indica el nombre del campo.

  Como atributos opcionales puede tomar:

  • MAXLENGTH, que limita el máximo número de caracteres que pueden ser introducidos en el campo. Si el valor es mayor que el del atributo SIZE, el visor debe permitir el desplazamiento de la línea. El número de caracteres por defecto es ilimitado.
  • SIZE, que especifica la cantidad de espacio reservada para este campo. El valor por defecto depende del visor.
  • VALUE, que indica el valor inicial del campo.

  Ejemplo:

  Calle: <input name=calle><br> N&uacute;mero: <input name=numero><br> C&oacute;digo postal: <input name=cp size=5 maxlength=5 value="99999"><br>

• Password: INPUT TYPE=PASSWORD.

  Es un campo de texto como el anterior, pero el valor no se ve al escribirlo.

  Ejemplo:

  Clave de usuario: <input name=login><br> Contrase&ntilde;a: <input type=password name=passwd>

• Caja de selección: INPUT TYPE=CHECKBOX.

  Representa una opción booleana (sí o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple (n de muchos).

  Los elementos de este tipo requieren los atributos NAME y VALUE, que indican el nombre del elemento o grupo de elementos y la parte del valor del campo aportada por el elemento, respectivamente.

  Opcionalmente podemos incluir el atributo CHECKED, que indica que el estado inicial es seleccionado.

  Ejemplo:

  Qu&eacute; bebidas le gustan: <input type=checkbox name=bebida value=agua checked>Agua<br> <input type=checkbox name=bebida value=cerveza>Cerveza<br> <input type=checkbox name=bebida value=vino>Vino<br>

• Botón: INPUT TYPE=RADIO.

  Representa una opción booleana (sí o no). Un conjunto de varios elementos de este tipo con el mismo nombre representan un campo de selección múltiple, 1 de muchos.

  Los elementos de este tipo requieren, al igual que en el caso anterior, los atributos NAME y VALUE.

  Opcionalmente podemos incluir el atributo CHECKED, que indica que el estado inicial es seleccionado. En cualquier momento sólo uno de los botones de un conjunto está marcado. Si ninguno de los elementos <INPUT> de un conjunto de botones de tipo radio especifica CHECKED, el visor debe marcar el primero de ellos inicialmente.

  Ejemplo:

  Qu&e acute; bebida prefiere: <input type=radio name=bebida value=agua>Agua<br> <input type=radio name=bebida value=cerveza>Cerveza<br> <input type=radio name=bebida value=vino>Vino<br>

• Pixel de una imagen: INPUT TYPE=IMAGE.

  Especifica una imagen para que la muestre el visor y permite la entrada de dos campos, las coordenadas x e y de un pixel seleccionado de la misma. Los nombres de los campos son iguales al del campo, añadiendo al final .x e .y respectivamente. Este tipo implica también TYPE=SUBMIT, es decir, cuando un seleccionamos un pixel, se envía todo el formulario.

  Los atributos NAME y SRC son necesarios y el campo ALIGN es opcional (al igual que en el elemento <IMG>).

  Ejemplo:

  Selecciona un punto del mapa: <input type=image name=punto src="mapa.gif">

• Oculto: INPUT TYPE=HIDDEN.

  Representa un campo oculto. El usuario no interactúa con él, es el atributo VALUE el que especifica el valor del campo. Tanto el atributo NAME como VALUE son obligatorios.

  Ejemplo:

  <input type=hidden name=clave value="l2k3j4l2k3">

• Botón de envío: INPUT TYPE=SUBMIT.

  Representa una opción (normalmente mediante un botón) que le indica al cliente que debe enviar el formulario.

  Como atributos opcionales acepta:

  • NAME. Indica que este elemento constituye un campo cuyo valor es el del atributo VALUE. En caso de que no se incluya el atributo, este elemento no es un campo.
  • VALUE. Indica la etiqueta para la entrada (botón).

  Ejemplo:

  Puede enviar esta solicitud al administrador del sistema: <input type=submit name=para value=administrador><br> o a m&iacute;: <input type=submit name=para value=yo>

• Botón de reinicio: INPUT TYPE=RESET.

  Representa una opción de entrada (generalmente mediante un botón) que le indica al cliente que debe reiniciar los valores de sus campos a los que tenían inicialmente. El atributo VALUE, si existe, indica la etiqueta a emplear para la entrada (botón).

  Ejemplo:

  Si se ha equivocado, pulse para volver a comenzar: <input type=reset>

Campo de Selección (SELECT)

El elemento <SELECT> se emplea para reducir el campo a una lista de valores.

Estos valores se presentan empleando elementos de tipo <OPTION>. Los atributos del elemento son:

• MULTIPLE. Indica que el valor puede incluir más de una opción.
• NAME. Especifica el nombre del campo.
• SIZE. Determina el número de ítems visibles. Si se indica tamaño uno, se suelen presentar como menús desplegables, mientras que si el tamaño es mayor se suelen presentar como lista con barra de desplazamiento.

Por ejemplo:

El elemento <OPTION> sólo puede aparecer dentro de un elemento <SELECT> y representa una posible elección. Puede tomar los siguientes atributos:

• SELECTED. Indica que esta opción está seleccionada inicialmente. Si ninguna opción tiene este atributo, el visor presenta la primera seleccionada.
• VALUE. Indica el valor a retornar si se selecciona la opción. Si no se incluye el atributo, se emplea el contenido del elemento.

Área de Texto (TEXTAREA)

El elemento <TEXTAREA> representa un campo de texto de múltiples líneas. Los atributos posibles son:

• COLS. El número de columnas visibles del área de texto, en caracteres.
• NAME. Nombre del campo.
• ROWS. El número de líneas visibles del área de texto, en caracteres.

Por ejemplo:

El contenido del elemento es el valor inicial del campo. La especificación de filas y columnas sólo se refiere a la dimensión del área visible, pero los programas cliente pueden permitir sobrepasar los límites mediante barras de desplazamiento. Generalmente se emplea un tipo de letra de caja fija para mostrar los contenidos del campo.

Envío de Formularios

Un visor de HTML comienza el proceso de un formulario presentando el documento con los campos en su estado inicial. Según el tipo de campo, el usuario puede modificar sus valores (seleccionando un campo, rellenando con texto, etc.). Cuando ha terminado, puede enviarlo empleando un botón de envío o una selección de pixel en una imagen. En ese momento el visor analiza las entradas en función del método, acción y tipo de codificación y lo envía.

En caso de que el formulario sólo tenga un campo de entrada de texto de una línea, el visor debe aceptar una pulsación de la tecla de retorno de carro en ese campo como una petición de envío del formulario.

Tipo de Codificación de Formularios

La codificación por defecto de todos los formularios es, según el esquema MIME, application/x-www-form-urlencoded. Un conjunto de datos de formulario se representa en este caso del siguiente modo:

1. Los nombres de campos y los valores son preprocesados: los espacios son reemplazados por el símbolo +, y los caracteres son sustituidos como en los URL, es decir, los caracteres no alfanuméricos se representan con un signo de porcentaje y dos dígitos hexadecimales que indican el código ASCII del carácter (%HH). Los saltos de línea (empleados en campos de múltiples líneas), se representan con pares CRLF (sustituidos por %0D%0A).
2. Los campos se listan en el orden en el que aparecen en el documento, con los nombres separados del valor por el símbolo = y los pares separados entre sí por el símbolo &. Los campos con valores nulos pueden ser omitidos, en particular, los campos no seleccionados en entradas booleanas no deben aparecer en los datos, pero los campos ocultos que tengan el atributo VALUE sí.

Formularios de Consulta: METHOD=GET

El método de consulta depende de los efectos que el formulario tenga en el estado del resto del mundo, es decir, si el envío va a producir cambios en cualquier documento o programa que no sea nuestro visor.

Si el proceso del formulario es idempotente (no produce cambios), el método debe ser GET. Un ejemplo de este tipo de formularios son las consultas a bases de datos, que no tienen efectos laterales visibles.

Para procesar un formulario cuyo URL de acción es un URL de tipo HTTP y el método es GET, el visor genera un URI que comienza con el de la acción al que se le añade un interrogante (?) y el conjunto de datos codificado con el formato application/x-www-form-urlencoded visto en el punto anterior. Para acceder a la consulta el visor accede al URI de la misma manera que lo hace con los que aparecen en los anclajes.

De todos modos, en algunos casos, la codificación de los datos puede generar un URI extremadamente largo, lo que puede provocar un funcionamiento erróneo con algunos servidores de HTTP antiguos. Por esta razón, algunos formularios que no tienen efectos laterales, se escriben usando el método POST.

Formularios con Efectos Laterales: METHOD=POST

Para formularios con efectos laterales (como uno que modifique una base de datos) se emplea el método POST.

Para procesar un formulario cuyo URL de acción es de tipo HTTP y el método es POST, el visor gestiona una transacción de tipo POST del protocolo HTTP, usando el URI de la acción y el cuerpo de un mensaje de tipo application/x-www-form-urlencoded como antes. El visor debe presentar la respuesta del HTTP POST de la misma forma que la respuesta obtenida con el método GET.

Ejemplo de Envío de Formularios

Llegados a este punto, se hace necesario mostrar un pequeño ejemplo para clarificar lo anterior. Si tenemos el siguiente documento:

El estado inicial de los datos del formulario es:

Hay que señalar que la entrada de tipo RADIO tiene valor inicial, mientras que el de tipo CHECKBOX no.

El usuario rellena los campos y solicita el envío. Supongamos que los valores son:

Entonces el visor gestiona una transacción HTTP POST usando el URI /cgi-bin/post-query. El cuerpo del mensaje será la siguiente línea:

Si quiere probar el ejemplo pinche aquí