Etiqueta label

La etiqueta label define una marca para un campo de entrada del tipo input, textarea, select y así sucesivamente.

La marca se vincula a un campo de entrada específico utilizando el atributo for. En él se debe especificar el valor del atributo id del campo de entrada al que está vinculada la marca. También la marca se vincula al elemento si este elemento se coloca dentro de la etiqueta label. En este caso no es necesario especificar el atributo for. Consulte los ejemplos para una mejor comprensión.

Al hacer clic en la marca, los casillas de verificación o botones de radio vinculados a ella cambiarán su estado de marcado a no marcado y viceversa. La marca en este caso es útil para la comodidad: es difícil hacer clic en elementos pequeños del formulario con el cursor, y en una marca larga con texto es mucho más fácil.

El campo de entrada de texto vinculado a la marca del tipo input y textarea recibirá el foco de entrada. El foco es cuando el cursor parpadea en el campo de entrada, en este caso, si escribes algo en el teclado, el texto llegará a este campo (ver la pseudoclase focus para una comprensión avanzada del foco).

La marca label se puede utilizar para imitar una casilla de verificación o un botón de radio. Esto es necesario para hacer un checkbox o radio con su propio diseño (lo cual está prohibido en CSS, pero mediante trucos es posible).

Atributos

Atributo	Descripción
for	En este atributo se debe especificar el valor del atributo id del campo de entrada al que está vinculada la marca label.
accesskey	Define una tecla de acceso rápido, con la que se puede acceder al elemento del formulario vinculado a la marca (a través del atributo for). Para más detalles, ver el atributo accesskey.

Ejemplo . Casilla de verificación

Vinculemos una marca a una casilla de verificación checkbox utilizando el atributo for. Haga clic en la marca y verá el cambio de estado de la casilla de marcado a no marcado y viceversa:

:

Ejemplo . Dentro de label

Y ahora no vinculemos la marca a través del atributo for, sino que insertemos los elementos directamente en la etiqueta label, en este caso, al hacer clic en el texto de label también activaremos el elemento:

:

Ejemplo . Campo de entrada de texto

Vinculemos una marca a la etiqueta input utilizando el atributo for. Al hacer clic en la marca se conseguirá el foco en el campo de entrada. Al mismo tiempo, el texto contenido en el campo (agregado mediante el atributo value) se seleccionará. Si comienza a escribir algo en el teclado, este texto se borrará. Se puede dejar de seleccionar, sin eliminar el texto, haciendo clic con el mouse en el campo de entrada: el foco no desaparecerá, pero la selección desaparecerá:

:

Véase también