Hasta el momento se han presentado características de HTML que permiten al lector visualizar en su navegador documentos multimedia y navegar por ellos, aunque el lector no tenia posibilidad de interactuar con ellos. El siguiente paso consiste en definir dicha posibilidad: los formularios.
El principio del formulario es bien sencillo: el usuario rellena una serie de campos y se los devuelve al servidor HTTP para que los procese mediante algún programa de tratamiento. Los campos pueden ser de diversa naturaleza, como campos de edición, menús desplegables, listas de opciones, texto, etc.
Para iniciar un formulario en HTML se utilizará la etiqueta <form>...</form>. Dentro de ella especificaremos todos los campos que intervienen en el formulario:
Con esta etiqueta especificaremos el tratamiento que se realizará con los campos introducidos por el usuario. Para ello existen dos atributos:
<form action="cgi-bin/check_access.do"> ... </form>
get y post, siendo get el método utilizado si se omite este atributo.
El significado de este atributo está asociado con los métodos GET y POST del protocolo HTTP. A modo de resumen, con el método GET la acción enviar el formulario se interpreta como codificar una URL con los valores de los controles codificados como un URI, por ejemplo:
cgi-bin/check_access.do?nombre=Mariano&edad=39
Con el método POST la acción enviar el formulario se realiza en dos pasos: (1) se conecta con la URI indicada en action, en nuestro ejemplo cgi-bin/check_access.do y (2) se envían los datos, en este caso la cadena nombre=Mariano&edad=39.
Por tanto, debemos hacer estas consideraciones sobre si usar GET o POST:
Su uso implica que la acción de enviar el formulario es idempotente: no modifica el resultado. Es decir, si envío dos veces el formulario obtendré el mismo resultado las dos veces. Por el ejemplo, si la acción implica una consulta en una base de datos y devolver el resultado, podríamos utilizar el método GET, ya que una búsqueda no altera el contenido de la base de datos, así que si repetimos la operación, obtendremos el mismo resultado.
Usando GET los valores que han tomado los controles serán visibles a todos los elementos de la comunicación, desde el navegador, proxies, enrutadores, balanceadores. Aunque se pueden codificar, la condición de idempotencia impide que la técnica de codificación sea muy segura.
Por contra, usando GET se pueden hacer pequeñas aplicaciones que se ejecuten íntegramente en el cliente del usuario, como los típicos tests de las revisitas o incluso hacer una pequeña calculadora.
El uso de este método implica que la acción puede causar un efecto en el servidor y que, entonces, repetir la operación arroje un resultado distinto. Por ejemplo, dar de alta un usuario es una operación que sólo se puede hacer una vez. Un formulario que recoja los datos para enviarlos al servidor y que éste los utilice para dar de alta a un usuario debería utilizar forzosamente el método POST.
Como ventaja adicional, el formato con que enviamos los datos al servidor son negociables, lo que permite por ejemplo, codificar la salida o enviar el formulario como XML (como caso extremo y no recomendable podríamos llegar a enviar la sentencia SQL). Además, si con el servidor estamos dialogando con HTTPS en vez de HTTP, la transmisión de datos será segura.
Como conclusión deberíamos utilizar el método POST siempre que sea posible, y reservar el método GET para consultas muy sencillas y sin peligro de seguridad.
El contenido de un elemento <form> únicamente pueden ser etiquetas de bloques de texto (párrafos, tablas, listas, etc.), y usaremos estos bloques para distribuir el texto del formulario mezclado con los controles de entrada de información que mostramos a continuación.
Es una de las etiquetas que permite especificar algunas clases de campos de entrada, dependiendo de los atributos asociados:
text<form action="..."> <p><input name="bookName" size="30" /></p> </form>Se visualizará:
submit<form action="..."> <input name="bookName" size="30" value="Introducción al XHTML" /> <p><input type="submit" value="enviar" /></p> </form>Se visualizará:
reset<form action="..."> <p><input type="reset" value="borrar" /></p> </form>Se visualizará:
checkbox<form> <p> <input type="checkbox" name="so" value="msdos" />MS-DOS<br /> <input type="checkbox" name="so" value="os2" />OS/2<br /> <input type="checkbox" name="so" value="unix" />UNIX<br /> </p> </form>Se visualizará:
radio<form> <p> <input type="radio" name="sexo" value="hombre" checked="checked" />Hombre <input type="radio" name="sexo" value="mujer" />Mujer </p> </form>Se visualizará:
password<form> <p><input type="password" name="passwd" /></p> </form>Se visualizará: Debe tenerse en cuenta que este control simplemente oculta la contraseña. Cuando se envíe el formulario, esta será enviada como texto en claro a través de la red.
hiddenSe utiliza para definir listas de opciones dentro de un formulario. El atributo name, comentado en la etiqueta <input>, se utiliza de la misma forma. Para especificar cada elemento de la lista u opción se utiliza la etiqueta <option> indicando a continuación el texto de la opción.
Existen dos tipos de listas:
<form action="...">
<p>
<select name="pueblo">
<option>Berrueces</option>
<option selected="selected">Ceinos de Campos</option>
<option>Laguna de Duero</option>
<option>Villalón</option>
</select>
</p>
</form>
Se visualizará:
<form action="...">
<p>
<select name="lugar" size="3" multiple="multiple">
<option>Berrueces</option>
<option>Ceinos de Campos</option>
<option>Laguna de Duero</option>
<option>Valladolid</option>
<option>Villalón</option>
</select>
</p>
</form>
Se visualizará:
Permite crear una zona de texto especificando el número de filas (atributo rows) y de columnas (atributo cols) de la ventana. Si se desea especificar un texto, se hará entre la etiqueta de apertura y la de cierre. Por ejemplo:
<form action="..."> <p><textarea name="opinion" rows="5" cols="60"> Introduzca la opinión de esta introducción a XHTML. </textarea></p> </form>Se visualizará: