Formularios web (I): Elementos básicos de HTML

Los formularios en las páginas web sirven para obtener datos de los usuarios. Igual que a nadie gusta rellenar largos e interminables formularios en papel, debemos tener esto, aún más en cuenta, a la hora de diseñar para la web. Para ello, podemos seguir estas sencillas reglas:

• Nunca se deben pedir más datos de los estrictamente necesarios. De esta forma evitaremos pesadez al usuario y nos ahorraremos espacio en nuestro sistema de almacenamiento de datos. A este consejo habría que añadir esta recomendación: nunca pedir datos al usuario hasta que no sean necesarios para la acción que está realizando. En una tienda del mundo real, a nadie nos preguntan el número de la tarjeta de crédito hasta que no vamos a pagar en la caja.
• Proporcionar valores por defecto siempre que sea posible (para rellenar menos campos y mejorar la satisfacción del usuario: cuanto menos tenga que teclear, mejor).
• En los campos que necesiten información específica, es buena idea proporcionar ayuda en línea que explique cómo rellenarlo, mostrando ejemplos reales o determinando rangos de entrada.
• Si hay errores en el formulario, mostrar claramente dónde se han producido y cómo resolverlos. Para los valores que sí estén correctos, habrá que recordarlos para evitar que el usuario los tenga que volver a rellenar.
• Si el número de campos a completar es alto, habrá que mostrar la información en grupos lógicos que tengan relación para que sea más fácil localizarla. Incluso puede ser buena idea descomponer un formulario grande en varias páginas, simulando el funcionamiento de un asistente. Si optamos por esta opción, la navegación entre las distintas páginas debe ser clara para permitir al usuario moverse de una a otra sin perder ningún dato.
• No hay nada más frustrante para el usuario que llegar al final de un formulario y equivocarse de botón (por ejemplo, pulsar el botón Cancelar y observar que todo lo que había escrito desaparece como por arte de magia). Hay que separar (o hacer más grande, o poner en una posición predominante, ...) la opción principal (que es enviar los datos) de otras secundarias (como la de restablecer los campos o volver a otra página anterior) para evitar esta situación.

Esta lista podría seguir hasta casi el infinito. El diablo está en los detalles y la diferencia entre un sitio amigable y con un buen número de visitantes puede estar en cómo, cuándo y cuánta información pide a los usuarios. Un buen estudio sobre estos y otros consejos para el diseño de formularios, podemos encontrarlo en Best Practices For Form Design.

El objetivo de esta serie de artículos es presentar un ejemplo sencillo de formulario web y ver los diferentes pasos que hay que hacer para integrarlo en una página web. Más concretamente, los objetivos de cada uno de los artículos son los siguientes:

• Elementos básicos de HTML (el presente artículo): breve introducción a algunos de los elementos disponibles en HTML para la construcción de los campos.
• Agrupación de los campos con HTML: hay diferentes formas de distribuir y presentar los campos de un formulario en HTML. Veremos algunas de ellas junto con sus ventajas e inconvenientes.
• Diseño con CSS: una vez estructurado el contenido en HTML, llega el momento de mostrar al usuario de la forma más amigable posible el formulario.
• Programación del lado del servidor: es buena idea crear una librería de código (para PHP) para construir formularios HTML puesto que es una tarea repetitiva en cualquier proyecto web.

El ejemplo que nos va a servir para ir viendo cada una de las partes (HTML, CSS y programación), es la creación de un sencillo formulario de contacto. Contendrá 3 campos: el nombre, el correo electrónico (para que podamos responder al visitante) y un campo de texto libre en el que irá el comentario que nos quieran escribir.

Campo de texto simple

En primer lugar vamos a ver como se codificaría en HTML el campo para el correo electrónico:

Correo electrónico: 

Correo electrónico: <input type="text" name="email" size="35" value="">

En principio, esta sería la forma más básica (y totalmente funcional) de construir el campo de nuestro formulario:

• El atributo type indica que es un campo de texto simple (que sólo puede contener una línea de texto).
• El atributo name indica el nombre de la variable que contendrá el valor del formulario.
• size indica el ancho del control en la visualización, en este caso, para que quepan 35 caracteres. Nada tiene que ver con el máximo número de caracteres que pueden introducirse en el control.
• Por último, el atributo value sirve para indicar el contenido por defecto que mostrará el control.

Hemos visto la forma simple, pero vamos a introducir algunas mejoras en el marcado HTML:

Correo electrónico: 

<label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" />

El elemento label sirve para relacionar un texto (que llamaremos etiqueta) con el campo al que hace referencia. Esto se hace en 2 fases: primero se marca en el atributo id del elemento input correspondiente el identificador del campo (que puede tener el mismo valor que el atributo name) y, después, indicar en el atributo for de label el identificador del campo al que se asocia. Con esta medida mejoramos el formulario en estos aspectos:

• En semántica, porque dotamos de estructura lógica al texto que hace de etiqueta del campo.
• En usabilidad, porque si se pulsa sobre el texto, el foco se situará sobre el control asociado.
• En accesibilidad, al proporcionar la asociación implícita entre el texto y el campo. Alguien que ve el formulario en la pantalla asocia la etiqueta al campo por la cercanía de los elementos pero para quien no lo puede ver, esa pista, por sí sola, no es suficiente.

Hemos indicado, a través del atributo maxlength la cantidad máxima de caracteres que admitirá el campo. De esta forma, por más que lo intente, el usuario no podrá introducir más caracteres de los permitidos y se evita que luego halla efectos de truncado de la información (si hubiéramos permitido introducir más pero en la base de datos no caben, tendríamos que haber truncado los caracteres sobrantes).

Como último retoque, hemos cambiado la forma en la que se cierra el elemento input (<input ... />), añadiendo una barra al final. De esta forma conseguimos compatibilidad con XHTML si queremos usar un formato más riguroso, sin perder la compatibilidad con el HTML normal porque también acepta esta forma de cerrar los elementos vacíos. Por la misma razón, los elementos y atributos siempre deben ir en minúsculas y los valores de los atributos entre comillas.

Los valores de los atributos id y name no tienen por qué coincidir. Sólo hay que recordar que se puede repetir el mismo valor de name en un formulario pero no así el valor de id, que debe ser único para cada elemento en una misma página.

Otra posible forma de codificar el campo del correo electrónico en HTML sería esta:

<label>Correo electrónico: <input type="text" name="email" size="35" maxlength="35" value="" /></label>

Escribiendo el elemento input dentro del label no hace falta indicar explícitamente la relación entre ambos elementos (atributos id y for). Pero, aun siendo totalmente válida esta alternativa, no es recomendable usarla porque puede causar algún problema en ciertos navegadores y lectores de pantalla.

Campo de texto multilínea

Continuemos viendo como escribir el código del campo Comentario. La idea es que el visitante de nuestra página escriba todo lo que quiera sin problemas de espacio. Como hemos visto antes, el elemento input se nos queda un poco pequeño pues sólo permite una línea de texto. Existe otro elemento, llamado textarea, que se ajusta mucho mejor a nuestras necesidades: el usuario puede escribir en varias líneas y viendo más texto de vez, como si escribiera un correo.

Comentario: 

<label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea>

Hemos utilizado la asociación entre etiqueta y control a través de los atributos for e id, como en el caso anterior.

Los atributos rows y cols sirven para dar dimensiones gráficas al control dentro de la página (4 líneas de alto y 40 caracteres de ancho).

En este elemento, el valor por defecto que se mostraría al visitante, debemos escribirlo como contenido de la etiqueta textarea. Por ejemplo, si quisiéramos mostrar un texto de muestra, tendríamos que escribir algo como esto:

Comentario: Texto de ejemplo

<label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40">Texto de ejemplo</textarea>

En cambio, si lo que queremos es que el campo esté completamente vacío, no debe haber ningún caracter extra (como un espacio o un retorno de carro) entre el cierre de <textarea ... > y el comienzo de </textarea>.

Botón de envío

Ahora necesitamos añadir un botón de envío para que el usuario pueda mandarnos sus datos a un lugar donde podamos almacenar la información.

<input type="submit" name="send" value="Enviar" />

Utilizando de nuevo el elemento input, cambiando el valor del atributo type por submit ya tenemos nuestro botón. Además, este valor indica que cuando se pulse el botón, se producirá el envío de los datos al lugar especificado por el atributo action del elemento form.

En este caso, el contenido del atributo value es lo que se mostrará como texto del botón, por lo que no es necesario añadir una etiqueta con el elemento label.

Elemento form

Todos los controles de formulario que hemos visto hasta ahora, tenemos que ponerlos dentro de otro elemento, denominado form, para indicar que todos los campos forman parte de la misma transacción de información y, también, para indicar el destino de esos datos.

<form action="http://www.example.com/store_info.php" method="post">
  <label for="name">Nombre:</label> <input type="text" id="name" name="name" size="35" maxlength="35" value="" />
  <label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" />
  <label for="comment">Comentario:</label> <textarea id="comment" name="comment" rows="4" cols="40"></textarea>
  <input type="submit" name="send" value="Enviar" />
</form>

El atributo action establece el lugar a donde irán a parar los datos del formulario. Generalmente, indicaremos la dirección de un script donde recoger y procesar la información pero también se puede indicar una dirección de correo de destino para que los datos se envíen mediante correo electrónico. Sólo recomiendo esta opción si no se dispone de otra forma de envío de datos porque el funcionamiento depende mucho de los programas con los que cuente el usuario en su máquina para enviar el correo.

Según el método de codificación de datos indicado en el atributo method, la información tendrá que ser decodificada de forma diferente en el lado del servidor porque se enviará de distinta forma desde el navegador cliente. Para simplificar esta cuestión, diré que el método post es algo más seguro y permite enviar más datos en la transacción.

Antes de terminar, quisiera comentar el uso del atributo title dentro de los campos para simular una sencilla ayuda contextual para rellenar el control.

Correo electrónico: 

<label for="email">Correo electrónico:</label> <input type="text" id="email" name="email" size="35" maxlength="35" value="" title="Se requiere una dirección de correo válida" />

Aunque su uso no es totalmente eficaz, pues sólo aparece si nos posicionamos sobre el control y no es un buen sistema para textos largos, sin embargo puede servir si el mensaje no es muy largo, además de ser una solución accesible para los programas lectores de pantalla.

Para una información más detallada sobre otros elementos que se pueden agregar en los formularios (como listas despleglables o casillas de verificación), recomiendo la lectura de los siguientes enlaces:

• Forms in HTML documents
• How to Use the Input Tag
• Basic Forms
• Creating Accessible Forms

Bibliografía recomendada

• HTML & XHTML: The Definitive Guide
• Mastering Integrated HTML And CSS