ETIQUETANDO LOS ELEMENTOS DEL FORMULARIO

La relación entre un elemento del formulario y su “label” o descripción textual se lleva a cabo por algún tipo de conexión que puede ser el alineamiento visual, el agrupamiento visual a través de fondos o cualquier otro indicador (tamaños, color de la fuente…)
No obstante quienes no pueden ver la página web sin esas pistas visuales ¿cómo pueden entender el formulario?
La clave es el elemento LABEL  ya que es la descripción textual del elemento, esta descripción debe estar semánticamente asociada al elemento de tal forma que un lector de pantalla, pordría leer correctemente la descripción.
ejemplo:

<label for=”Nombre”> Nombre del usuario </label>
<input id=”Nombre” name=”fombre” type=”text” />

Un label puede ser aplicado a cualquier elemento del formulario que automáticamente no incluye descripción textual como ocurre con los checkboxes, radio buttons, text areas, text fields o select boxes.
Para los “submit” no hace falta aplicar label porque la descripción está contenida en sus atributos “value” y “alt”
Se puede formatear fácilmente el texto del label usando CSS del mismo modo que se modifica un “p” un “span” o un “div” pero con la diferencia de que aumentamos la accesibilidad al hacer uso de la misma.


AGRUPANDO ELEMENTOS RELACIONADOS

La etiqueta “Legend” va de la mano de “fieldset”, de hecho el único elemento hijo de legend es el fieldset. El fieldset agrupa una serie de elementos relacionados. Se pueden crear diferentes fieldset con sus respectivos elementos.

Prodrían usarse encabezados en vez de legends pero se perdería la propiedad semántica de agrupamiento y etiquetado y se podría confundir a un lector de pantalla.

MAQUETACIÓN DEL FORMULARIO

Hay diferentes modos de maquetas un formulario, todo depende de su propósito y su longitud, cuándo se usará, quién lo usará. Normalmente es más eficiente tener un elemento de formulario por línea, ordenado en una especie de listado de elementos de formulario, unos debajo de otros. Normalmente las páginas están diseñadas para tener scroll vertical lo cual es otra razón para usar esta estructura. De este modo el usuario puede seguir un orden y fijar su atención introduciendo los datos secuencialmente.

Para cada elemento de formulario y con el orden habitual de lectura de izquierda a derecha, lógicamente la posición del “Label” pueden ser las siguientes:

1) encima del elemento
2) en una columna separada alinieada a la izquierda
3) en una columna separada alineada a la derecha

La primera opción permite procesar más rápido la información al usuario, el agrupamiento requiere menos movimiento ocular. Este tipo de maquetación es más inusual y menos estética, ocupa mucho más espacio vertical. En todo caso suele funcionar mejor con formularios cortos.

La segunda opción organiza más la información, ocupa menos scroll vertical, aunque la forma de alinear las labels puede afectar a la usabilidad del formulario. Se identifican mejor las label pero hay que esforzarse en asociarlas a su elemento.Ocupan menos espacio vertical.

La tercera opción crea un fuerte estructura de grupos. A diferencia de la opción anterior aunque se reconocen peor el las label, se asocian más fácilmente a su elemento. Suelen usarse en formularios que se visitan habitualmente. Ocupan menos espacio vertical.

Más información

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
http://www.lukew.com/resources/articles/web_forms.html

ES MEJOR EMPEZAR POR TENER UN CÓDIGO HTML CORRECTO

<form action=”ejemplo.php”>
<fieldset class=”fieldsetcolor”>
<legend><span>Datos de la receta</span></legend>
<ol>
<li>
<label for=”nombre_receta”>Nombre:</label>
<input name=”nombre_receta” type=”text” class=”texto_input_al_recetas_form02″ value=”&nbsp;” id=”nombre_receta” accesskey=”a” tabindex=”1″/>
</li>
<li>
<label for=”descripcion_receta”>Descripci&oacute;n:</label>
<input id=”descripcion_receta” name=”descripcion_receta” type=”text” class=”texto_input_al_recetas_form02″ value=”&nbsp;” accesskey=”b” tabindex=”2″/>
</li>
<li>
<label for=”ingredientes_receta”>Ingredientes:</label>
<input id=”ingredientes_receta” name=”ingredientes_receta” type=”text” class=”texto_input_al_recetas_form02″ value=”&nbsp;” accesskey=”c” tabindex=”3″/>
</li>
<li>
<label for=”presentacion_receta”>Presentaci&oacute;n: </label>
<input id=”presentacion_receta” name=”npresentacion_receta” type=”text” class=”texto_input_al_recetas_form02″ value=”&nbsp;” accesskey=”d” tabindex=”4″/>
</li>
</ol>
</fieldset>
<fieldset class=”botonsubmit”>
<input name=”submit” type=”submit” class=”submit_al_recetas_form02″ tabindex=”18″ value=”ENVIAR FORMULARIO” />
</fieldset>

</fieldset>
</form>

Ver ejemplo