Formularios web (II): Agrupación de los campos con HTML

En el primer artículo de esta serie, vimos como se codificaba cada uno de los elementos del formulario de contacto en HTML. Aun siendo totalmente funcional el formulario resultante, no es muy usable porque todos los elementos están apelotonados, sin orden ni sentido. Hay que dotar de estructura y semántica al conjunto y para ello veremos varias opciones de distribución y agrupación.

Distribución libre

La primera forma de ordenar los elementos del formulario podría ser esta: form_free_layout_unstyled.html

Simplemente ponemos un retorno de carro después de cada campo y listo. Como primera aproximación, no está mal pero no es la más acertada. De hecho, recuerda mucho a como construyen algunos usuarios de un conocido procesador de textos los saltos de página: a base de retornos de carro hasta pasar de página. Pero ambos casos tienen el mismo problema: simplemente, no funcionan.

En el caso del procesador de textos, si aumentamos o disminuimos el tamaño de letra o quitamos o añadimos contenido, tendremos que cambiar el número de retornos de carro que sirven para alcanzar la siguiente página.

En el caso de nuestro formulario, la etiqueta <br /> no tiene significado alguno dentro de la enumeración de campos. Sólo tiene como objetivo mejorar la presentación. Pero la presentación no debería ser objeto de la codificación HTML, para eso ya están las hojas de estilo CSS. Mediante HTML debemos escribir el contenido de las páginas y dotarlo de significado a través de los diferentes elementos. Así pues, esta primera opción queda descartada.

Distribución basada en tabla

Es la forma más sencilla de disponer los elementos en la plantilla y la que más prestaciones de presentación ofrece, pero también es la que menos semántica aporta al contenido y la que más marcado HTML necesita.

Es sencilla si se domina la codificación de las tablas (que no es nada fácil de aprender) pero, lamentablemente, debido a un mal uso de este elemento, es fácil asumir que esta es una técnica muy conocida porque en multitud de páginas se usan para lo que no fueron hechas: para maquetar las páginas en lugar de usarlas para mostrar datos tabulados.

Ejemplo: form_table_layout_unstyled.html

Con este ejemplo se puede observar que:

• Cada etiqueta queda alineada con su campo asociado.
• Aunque no se aprecie, la tabla se ajusta al contenido. Es decir, no tiene un ancho del 100% de la página.

Estas ventajas que nos aporta el uso de tablas sólo tienen fines de presentación pero, hemos dicho que de la presentación ya se ocuparían las hojas de estilo, ¿no? De lo que se trata en HTML es de dotar de significado al contenido mediante el marcado. Sin embargo, lo que hemos conseguido es esto:

• El título del formulario se ha convertido en un encabezado de tabla.
• Hacer trabajar más a los lectores de pantalla porque hemos aumentado el marcado.
• La estructura se ha convertido en algo sin sentido por utilizar las celdas de la tabla como contenedores de los campos (¿qué sentido tiene poner un botón dentro de la celda de una tabla?).

Ante estas terribles circunstancias, será mejor valorar otras opciones.

Distribución basada en lista

Para dotar de significado a la codificación del formulario, se podría pensar que los campos constituyen una enumeración (y poder utilizar entonces como contenedor el elemento ul), que puede incluso determinarse un orden en la importancia de los campos (para usar el elemento ol). Otra posible idea sería considerar que tenemos que rellenar la definición que se nos da en la etiqueta (entonces podríamos escribir una lista de definiciones con los elementos dl, dd y dt).

Ejemplo: form_list_layout_unstyled.html

Con cualquiera de estas formas se dota de estructura al contenido y de cierto significado, si alguna de las metáforas tuviera fundamento. Todas me parecen algo sacadas de contexto, sobre todo la de la lista de definiciones (aunque no me he podido resistir a ponerla en el ejemplo por ser la más rebuscada). De todas maneras, veamos si hemos ganado algo respecto al anterior punto:

• Hemos conseguido la ordenación de los campos.
• Hay menos marcado HTML.
• Se consigue dotar de semántica al contenido (aunque no sea la más adecuada).

Distribución basada en párrafos

Antes de explicar la siguiente propuesta, vamos a hacer un pequeño paréntesis para explicar 2 elementos que dotarán de significado al formulario.

El elemento fieldset sirve para agrupar lógicamente un grupo de campos dentro de un formulario. Por ejemplo, podríamos agrupar dentro de un fieldset los datos personales (nombre y apellidos) y dentro de otro, los datos postales (dirección, código postal, etc.), todo ello dentro de un mismo formulario:

<form action="http://www.example.com/store_info.php" method="post">
  <fieldset>
    <legend>Datos personales</legend>
    <label for="first_name">Nombre:</label> <input type="text" id="first_name" name="first_name" value="" />
    <label for="surname">Apellidos:</label> <input type="text" id="surname" name="surname" value="" />
    ...
  </fieldset>

  <fieldset>
    <legend>Datos postales</legend>
    <label for="address">Dirección:</label> <input type="text" id="address" name="address" value="" />
    <label for="city">Población:</label> <input type="text" id="city" name="city" value="" />
    ...
  </fieldset>

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

Aunque con el ejemplo ya se puede intuir el uso del elemento legend, vamos a explicarlo un poco más en detalle. Con este elemento se etiqueta a un grupo de campos, se describe la función lógica de ese conjunto de datos.

Como hemos visto, sólo con el uso de estos elementos ya se dota de cierta estructura al contenido pero todavía es necesario utilizar elementos de bloque para dar estructura a cada uno de los campos. Para ello, vamos a ver como queda utilizando párrafos: form_paragraph_layout_unstyled.html

• Hemos cambiado el encabezado h1 por el uso del elemento legend, con lo que hemos dotado de más semántica al título del formulario. De rebote, también hemos mejorado la accesibilidad ya que los lectores de pantalla podrán describir mejor los campos del formulario.
• Hemos conseguido ordenar los campos para que sea más fácil rellenarlos.
• El marcado HTML no puede ser más simple ni reducido y, a la vez, no puede tener más semántica.

¿Acaso ya hemos descubierto la forma más correcta de escribir el formulario en HTML? Pues, como casi todo, es relativo y dependerá de nuestras necesidades. Hay un pequeño inconveniente en esta distribución y por eso vamos a ver un ejemplo más.

Distribución basada en divisiones lógicas

El inconveniente tiene que ver con lo que puede ir dentro de un elemento p. Existe una limitación que, en algunos casos, puede ser importante: no podemos poner otros elementos de bloque dentro (sólo es posible insertar texto y algunos elementos en línea). Esta es la razón por la que, en lugar de utilizar el elemento p, utilizaremos el elemento div.

Ejemplo: form_div_layout_unstyled.html (este será el formulario que utilizaremos en el siguiente artículo de la serie para aplicarle estilos CSS y darle una apariencia más amigable).

• La legibilidad se mantiene a la hora de rellenar el formulario.
• El marcado HTML es casi tan mínimo como antes e igual de sencillo.
• Podemos añadir elementos de bloque dentro de cada agrupación lógica de cada campo. Por ejemplo, si se quiere adjuntar una pequeña ayuda en línea para algún campo.

...
<fieldset>
  <legend>Datos postales</legend>

  <div>
    <label for="address">Dirección:</label>
    <input type="text" id="address" name="address" value="" />

    <p>Ejemplo: calle, número, piso, letra</p>
  </div>

  ...
</fieldset>
...

Bibliografía recomendada

• The Art and Science of CSS
• Web Accessibility