gomflo

No soy fan de hacer formularios, y no conozco alguien que lo sea. Sin embargo, el hecho es que la mayoría de los sitios web utilizan formularios, y juegan un papel principal en la experiencia del usuario. Grandes sitios web tienen muchos y complejos formularios, que nosotros como desarrolladores invertimos mucho tiempo construyendo, y miles de usuarios invierten aún más tiempo rellenando estos. Con esto dicho yo creo que es importante convertirse en un buen entendedor de como construir formularios adecuados.

Campos checkboxes y radios

Los pequeños cuadros y círculos que todos hacemos clic para indicar decisiones importantes en nuestra vida de internet. Cuando rellenas un determinado formulario que tiene alguno de estos campos hay veces que puedes dar clic en cualquier parte del texto describiendo el elemento. Sin embargo otras veces, no es el caso, y tienes tienes que dar el clic en el pequeño circulo o cuadro del campo para indicar tu elección. Para los usuarios experimentados esto se vuelve una molestia, el punto de la web y que todos deseamos es que sea facilmente accesible para cualquiera. Los formularios toman mucho tiempo de rellenar y nadie desea poner toda esa información. Lo ultimo que deseamos es hacerlo complicado.

La etiqueta label

Entonces aquí esta la solución para todo lo anterior. Bueno es extremadamente simple, necesitas agregar una nueva etiqueta a tu arsenal: label. En términos simples la etiqueta label indica en el html que texto acompaña que campo de la forma.

Ejemplo con un checkbox y la etiqueta label:

<input type="checkbox" id="recordarme" name="recordarme" />
<label for="recordarme">Recordarme en esta computadora</label>

Ejemplo con un checkbox sin la etiqueta label:

<input type="checkbox" id="recordarme" name="recordarme" />
Recordarme en esta computadora

¿Notan la diferencia?. En el primer ejemplo podemos dar clic sobre el texto que esta alrededor y marca ó desmarca el checkbox automaticamente, en el segundo ejemplo es necesario dar clic especificamente en el cuadro del checkbox.

Ejemplo con botones de radio

<input type="radio" name="valor_idea" id="buena" />
<label for="buena">Buena idea</label>
 
<input type="radio" name="valor_idea" id="mala" />
<label for="mala">Mala idea</label>

No solo para checkboxes y radios

Todo lo anterior no quiere decir que la etiqueta label es solo para checkboxes y botones radio. También puede ser usado en la campos input (text, radio, checkbox), select, y textarea.

Ahora que entiendes el verdadero uso de la etiqueta label deberias empezar a utilizarla. Crear formas accesibles es el elemento clave para desarrollar de acuerdo con los estándares web.