EstadoBeta

El diseño de formularios web suele ser mirado en menos, pero puede ser uno de los desafíos más interesantes para algunos diseñadores de interfaces con tiempo en sus manos.
Tradicionalmente resueltos por medio de tablas y gifs transparentes, los formularios HTML bien estructurados son fundamentales si el proyecto tiene en cuenta la accesibilidad: los formularios y sus elementos son las herramientas que ofrece el estándar HTML para manipular los contenidos.

Sigue leyendo para ver ejemplos y código sabrosón.

El cómo estructurar y diseñar formularios es aún un punto a debatir. Actualmente se trabaja en nuevos estándares y tecnologías como xForms que darán más control a usuarios y desarrolladores. Por ahora, describo la estructura que me ha dado mejores resultados en los últimos años.

<fieldset id="ejemplo-1">
	<legend>Datos personales</legend>
	<p>
		<label for="nombre">nombre:</label>
		<input type="text" name="nombre" id="nombre" />
	</p>
	<p>
		<label for="email">email:</label>
		<input type="text" name="email" id="email" />
	</p>
</fieldset>

Vamos por partes.

<fieldset>

La etiqueta <fieldset> es parte de HTML y, como su nombre lo indica, su propósito es contener un conjunto de campos o controles como <textarea>’s, <input>’s, <select>’s y otros.

<legend>

La etiqueta <legend> es obligatoria dentro de cada fieldset y lleva el título del conjunto o subconjunto de campos (por ejemplo “datos personales”, “datos requeridos”, etc.). Es válido poner fieldsets dentro de fieldsets.

<label>

La etiqueta <label> se usa para anotar los títulos de cada campo y, si su atributo for es igual a la id del campo o control, tiene la ventaja de posicionar el foco en el control aún si el usuario hace click en el título. Esto mejora la accesibilidad al ampliar el area sensible de cada control y relaciona los campos y sus títulos para lectores de pantalla y otros dispositivos con restricciones de diseño visual.

El ejemplo de arriba, sin CSS, se ve así.

Cómo verán, la mayoría de los browsers agregan un borde en relieve a los fieldsets y sitúan los legend> en una posición particular sobre el borde superior del fieldset. Los bordes se controlan fácilmente con un poco de CSS:

fieldset {
    border: solid gray 2px;
}
fieldset.sin-bordes {
    border-width:0;
}

<legend> es un poco más difícil. Por mi experiencia los navegadores actuales no ofrecen una interpretación de CSS consistente para ese elemento. Personalmente opto por esconderlo con legend {display:none;} si no lo ocupo, o incluír un h3 o h4 más controlable dentro del fieldset, manteniendo el legend aún invisible para mejorar a accesibilidad ^*1

La forma elegida para ordenar los elementos dentro de los fieldsets es arbitrária. Muchos eligen separar cada par label/input por cambios de línea (<br />). Otros ponen complicadas tablas dentro de los fieldsets. Yo prefiero la estructura de arriba porque permite los diseños más habituales para formularios. Por ejemplo, los títulos a la izquierda de los campos, alineados a la derecha:

input {
	border:solid black 1px;
	padding:.25em;
}
fieldset {
	width: 25em;
}
/* Alinear labels a la izquierda de los campos */
#ejemplo-1 label {
	float:left;
	width:10em;
	background:silver;
	text-align:right;
	margin-right:.5em;
	padding:.25em;
}

Eso se ve así.

Con un pequeño ajuste a los floats podemos invertir el diseño y situar los títulos a la derecha de los campos. Si en lugar de floats usamos display:block para los labels podemos posicionarlos sobre el campo correspondiente, así.

Por supuesto esos son ejemplos ilustrativos. Aquí se puede ver algo un poco más complejo y funcional (perdónenme, no soy diseñador).

Por último, hay una serie de opciones posibles para estructurar formularios acesibles en (X)HTML. Una muy interesante que vi recientemente es usar el elemento <dl> (Definition List) y sus sub-elementos dt y dd para los labels y los campos, respectívamente:

<fieldset id="ejemplo-2">
	<legend>Datos personales</legend>
	<dl>
		<dt>
			<label for="nombre">nombre:</label>
		</dt>
		<dd>
			<input type="text" name="nombre" id="nombre" />
		</dd>
		<dt>
			<label for="email">email:</label>
		</dt>
		<dd>
			<input type="text" name="email" id="email" />
		</dd>
	</dl>
</fieldset>

Más complicado que mi ejemplo pero también más flexible para manipular con CSS e infinítamente más sencillo y accesible que una tabla.

Cuestión de opción.

Algunos links

• Tableless forms.
• Styling form controls
• Stylish, accessible forms
• Forms markup and CSS

 "requerido: nombre; requerido: email; requerido: teléfono..." (etc).

• Servicios:
• Comentarios RSS
• Menear!
• Del.icio.us