La etiqueta label permite dar un título o descripción a cada campo del formulario, además al usar esta etiqueta hacemos que el formulario sea más fácil de usar, como veremos seguidamente. Entre la etiqueta de inicio <label> y la de cierre </label> se escribe el título del campo y la etiqueta del campo input.
<label>Nombre:<input type="text" name="nombre2" /></label>
Hasta ahora, deliberadamente, hemos usado la etiqueta <p> para dar título a cada campo, lo cual no es lo más apropiado pero así nos centrábamos en el propio campo sin introducir otras etiquetas, además, ahora vamos a ver mejor la diferencia usando label, estos son los campos de un formulario utilizando la etiqueta <p>:
<p>Sexo: Hombre<input type="radio" name="sexo" value="h"> Mujer<input type="radio" name="sexo" value="m" ></p> <p>Acepto condiciones: <input type="checkbox" value="acepta" name="condiciones" ></p> <p>Nombre: <input type="text" name="nombre" ></p
Funciona correctamente pero observa que hay que hacer clic exactamente en el círculo que hay al lado de Hombre para seleccionarlo, lo mismo sucede en el cuadradito para aceptar las condiciones, y también hay que hacer clic dentro del campo del Nombre si queremos rellenarlo directamente, sin embargo comprueba cómo funciona de forma diferente utilizando el siguiente código con la etiqueta label:
Sexo: <label>Hombre<input type="radio" name="sexo" value="h" /><label><label>Mujer<input type="radio" name="sexo" value="m" /></label><br> <label>Acepto condiciones:<input type="checkbox" value="acepta" name="condiciones2" /></label><br> <label>Nombre:<input type="text" name="nombre2" /></label><br>
Basta con hacer clic en el texto de la etiqueta label para seleccionar el campo, por ejemplo, al hacer clic en la palabra Hombre se selecciona el campo. De esta forma se rellena más fácilmente el formulario ya que disponemos de una zona más amplia para hacer clic.
Existen dos formas de usar las etiquetas label, la que acabamos de ver se puede llamar formaimplícita, y la que vamos a ver ahora es la forma explícita. Consiste en asignar un identificador en el atributo for a cada etiqueta label para relacionarla con la etiqueta input que contiene el mismo identificador en el atributo id. Por ejemplo:
<label for="nomb">Nombre:</label> <input type="text" name="nombre3" id="nomb"/>
Con lo que el resto de campos quedaría así:
Sexo: <label for="nom">Hombre<label> <input type="radio" name="sexo" value="h" id="nom" /> <label for="muj">Mujer</label> <input type="radio" name="sexo" value="m" id="muj" /><br /> <label for="cond"> Acepto condiciones:</label> <input type="checkbox" value="acepta" name="condiciones3" id="cond" /><br /> <label for="nomb"> Nombre: </label> <input type="text" name="nombre3" id="nomb"/> <br />
Como puedes comprobar el resultado es el mismo
Para practicar lo aprendido realiza el ejercicio Formulario _básico
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.