2011-10-03 15 views
41

Desde una perspectiva de presentación, si escribo un texto entre una etiqueta <label> parece idéntico a si no lo hubiera hecho.¿Por qué usar <label>?

Entonces, ¿por qué usamos esta etiqueta en absoluto?

+0

Ver: http://stackoverflow.com/questions/2257606/making- checkbox-and-radio-labels-clickable – RedFilter

+22

El HTML es ** no ** sobre la presentación. – MrMisterMan

+18

¡Ojalá la gente dejara de votar mi comentario y comenzara a votar mi respuesta! ; P – MrMisterMan

Respuesta

42

El atributo for de un elemento label corresponde al atributo id de un elemento input. Si hace clic en la etiqueta, pone el foco en el cuadro de entrada.

Ejemplo:

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label> 

See this in action.

Si hace clic en el texto, se comprueba la caja.

+2

Tenga en cuenta que esto es para mejorar la accesibilidad, especialmente para los usuarios de lectores de pantalla. –

+1

¡gran ilustración! –

3

Al hacer clic en la etiqueta, el foco se dirige a la entrada relacionada. Muy útil para casillas de verificación cuando es difícil golpear el pequeño rectángulo.

1

De HTML label tag:

"El elemento de etiqueta no hace como algo especial para el usuario Sin embargo, proporciona una mejora facilidad de uso para los usuarios de ratón, ya que si el usuario hace clic en el texto dentro del elemento etiqueta,. alterna el control.

El atributo for de la etiqueta debe ser igual al atributo id del elemento relacionado para unirlos. "

1

Nada desde el punto de vista de la presentación. La etiqueta Lable se usa para definir la etiqueta de un elemento de entrada . Desde el punto de vista semántico, no debe usarse para definir texto.

4

El <label> etiqueta HTML tiene una característica especial: Se le permite proporcionar un atributo for que une la etiqueta a un campo de entrada u otro control, de forma que cuando el usuario hace clic en la etiqueta, es como si se hace clic en el control.

por ejemplo:

<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'> 

Esto significaría que cuando el usuario hace clic en la 'etiqueta de texto', la casilla de verificación podría ser activado.

Esto es útil para accesibilidad, facilidad de uso general, y también permite algunos trucos, como hacer un control de alternar que no se parece a una casilla de verificación, pero contiene uno detrás de las escenas.

Pero aparte de esta característica for, el elemento <label> es básicamente el mismo que cualquier otro elemento HTML.

Si no va a utilizar el atributo for, aún puede ser correcto usar un elemento <label>, por razones semánticas.

77

HTML es no sobre la presentación. Es una forma de describir datos. Si tiene algún texto que represente una etiqueta para una entrada, envuélvalo en etiquetas de etiqueta no para presentación, sino porque eso es lo que es. Sin la etiqueta de la etiqueta, ese texto es casi insignificante.Con la etiqueta de la etiqueta y su atributo for (o no *) está proporcionando significado y estructura y formando una relación entre su marcado que puede ser mejor entendido por computadoras/analizadores/navegadores/personas.

* que no necesariamente necesita el for si se coloca la etiqueta alrededor de la entrada:

<label>My input 
 
    <input type="text" id="my-input" /> 
 
</label>