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.
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:
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úmero: <input name=numero><br>
Có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ña: <input type=password name=passwd>
||
- Caja de selección: INPUT TYPE=CHECKBOX.
Representa una opción booleana (si 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é 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>
||
Representa una opción booleana (si 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>
||
- Píxel 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 píxel, 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="l2k3j4l2k3j4l2k3j4lk23">
||
- 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í:
<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úes desplegables, mientras que si el tamaño es mayor se suelen presentar como lista con barra de desplazamiento.
Por ejemplo:
||
<SELECT NAME="bebida">
<OPTION selected>Agua
<OPTION>Cerveza
<OPTION VALUE=refresco>Refresco Gaseoso
<OPTION>Vino
<OPTION>Zumo
</SELECT>
||
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:
||
<TEXTAREA NAME="direccion" ROWS=6 COLS=64>
Magallanes, 25 - 28015 MADRID
</TEXTAREA>
||
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.
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 píxel 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:
- 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 tanto por cien 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).
- 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:
||
<!DOCTYPE HTML PUBLIC "-IETFDTD HTML 2.0EN">
<title>Ejemplo de envío de formularios HTML</title>
<H1>Cuestionario de Personal</H1>
<P>Por favor, rellene el siguiente cuestionario:
<FORM METHOD="POST" ACTION="http://www/personal">---<P>Nombre: <INPUT NAME="nombre" size="48">
<P>Hombre <INPUT NAME="genero" TYPE=RADIO VALUE="hombre">
<P>Mujer <INPUT NAME="genero" TYPE=RADIO VALUE="mujer">
<P>Número de miembros de la familia: <INPUT NAME="familia" TYPE=text>
<P>Idiomas que conoce:
<UL>
<LI>Francés <INPUT NAME="idioma" TYPE=checkbox VALUE="Frances">
<LI>Inglés <INPUT NAME="idioma" TYPE=checkbox VALUE="Ingles">
<LI>Otros
<TEXTAREA NAME="otros" cols=48 rows=4></textarea>
</UL>
<P> Pulse aquí para enviar los datos <INPUT TYPE=SUBMIT>
<P> Puede volver a comenzar en cualquier momento pulsando aquí <INPUT TYPE=RESET>
</FORM>
||
El estado inicial de los datos del formulario es:
||
nombre ---genero "hombre"---familia
otros ""
||
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:
||
nombre "Alicia Lindell"
genero "mujer"
familia "4"
idioma "ingles"
otros "catalan\neuskera\ngallego"
||
Entonces el visor gestiona una transacción
HTTP POST usando el
URI http://www/personal##. El cuerpo del mensaje será la siguiente línea:
|| nombre=Alicia+Lindell&genero=mujer&familia=4&idioma=ingles&otros=catalan%0D%0Aeuskera%0D%0Agallego
||
