Etiqueta label de HTML

Cuando queremos introducir datos en un formulario, estamos acostumbrados a pinchar sobre la caja de texto y escribir. Pero mucha gente acostumbra a pinchar sobre el nombre del campo, en vez de sobre la caja de texto.

Utilizando la etiqueta label en vez de introducir el texto tal cual, conseguimos que la página web se comporte de esta forma que acabo de comentar, moviendo el foco de la página web sobre la caja de texto al pinchar sobre el nombre del campo.

Para ello se utiliza el atributo for de la etiqueta label. Basta con indicar el id del input correspondiente, tal y como aparece en el ejemplo:

<table>
<tr>
<td><label for="nombre">Nombre:</label></td>
<td><input type="text" id="nombre" value=""/></td>
</tr>
<tr>
<td><label for="apellidos">Apellidos:</label></td>
<td><input type="text" id="apellidos" value=""/></td>
</tr>
</table>   

El siguiente formulario no utiliza etiquetas label:

Nombre:
Apellidos:

Y este otro formulario si que utiliza etiquetas label:

Nombre:
Apellidos: