¿Qué es el atributo HTML para = “” en <etiqueta>?

84

He visto esto en jQuery, ¿qué hace?

<label for="name"> text </label>
<input type="text" name="name" value=""/>
Chris G.
fuente
15
¿Dónde has visto esto en jQuery?
VisioN
2
Puede estar en algunos de los estilos en línea de jquery. Muchos de los jquery usan esto para definir el requisito en la página html
Vivek Dragon
12
la línea anterior no es parte de jquery su html
simplemente coloque el

Respuestas:

26

Para asociar el <label>con un <input>elemento, debe asignar <input>un idatributo. El <label>entonces necesita un foratributo cuyo valuees la misma que la entrada de id:

<label for="username">Click me</label>
<input type="text" id="username">

El foratributo asocia a <label>con un <input>elemento; que ofrece algunas ventajas importantes:
1. El texto de la etiqueta no solo se asocia visualmente con su entrada de texto correspondiente; también está asociado programáticamente con él. Esto significa que, por ejemplo, un lector de pantalla leerá la etiqueta cuando el usuario se concentre en la entrada del formulario, lo que facilitará que un usuario de tecnología de asistencia comprenda qué datos deben introducirse.
2. Puede hacer clic en la etiqueta asociada para enfocar / activar la entrada, así como la entrada en sí. Esta área de impacto aumentada proporciona una ventaja a cualquiera que intente activar la entrada, incluidos aquellos que usan un dispositivo de pantalla táctil.

Alternativamente , puede anidar <input>directamente dentro de <label>, en cuyo caso los atributos fory idno son necesarios porque la asociación es implícita:

<label>Click me <input type="text"></label>

Notas:
Se inputpuede asociar una con varias etiquetas.
Cuando <label>se hace clic o se toca y se asocia con un control de formulario, el evento de clic resultante también se genera para el control asociado.

Problemas de accesibilidad

No coloque elementos interactivos como anclajes o botones dentro de una etiqueta. Hacerlo dificulta que las personas activen la entrada de formulario asociada con la etiqueta.

Encabezados

Colocar elementos de rumbo dentro de un <label>interfiere con muchos tipos de tecnología de asistencia, porque los títulos se usan comúnmente como ayuda para la navegación. Si el texto de la etiqueta debe ajustarse visualmente, use clases CSS aplicadas al <label>elemento.
Si un formulario o una sección de un formulario necesita un título, utilice el <legend>elemento colocado dentro de un <fieldset>.

Botones

Un <input>elemento con una type="button"declaración y un atributo de valor válido no necesita una etiqueta asociada. Hacerlo puede interferir con la forma en que la tecnología de asistencia analiza la entrada del botón. Lo mismo se aplica al <button>elemento.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

wasmup
fuente
135

El foratributo se usa en etiquetas. Se refiere a la identificación del elemento con el que está asociada esta etiqueta.

Por ejemplo:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Ahora, cuando el usuario haga clic con el mouse en el usernametexto, el navegador colocará automáticamente el foco en el inputcampo correspondiente . Esto también funciona con otros elementos de entrada como <textbox>y <select>.

Cita de la especificación :

Este atributo asocia explícitamente la etiqueta que se está definiendo con otro control. Cuando está presente, el valor de este atributo debe ser el mismo que el valor del atributo id de algún otro control en el mismo documento. Cuando está ausente, la etiqueta que se define se asocia con el contenido del elemento.

En cuanto a por qué su pregunta está etiquetada con jQuery y dónde vio que se usa en jQuery, no puedo responder porque no proporcionó mucha información.

Tal vez se usó en un selector de jQuery para encontrar el elemento de entrada correspondiente dada una instancia de etiqueta:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});
Darin Dimitrov
fuente
7
Solo una nota al margen. También se utiliza para el nuevo <output>elemento. Referencia de MDN .
Christofer Eliasson
13

Siento la necesidad de responder a esto. Tuve la misma confusión.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Cambié el atributo for en la etiqueta 'masculino' a femenino. Ahora, si hace clic en 'masculino', se comprobará la radio 'femenina'.

Simple como eso.

muy venerable señor
fuente
5

un ejemplo rápido:

<label for="name">Name:</label>
<input id="name" type="text" />

la for=""etiqueta también permite enfocar la entrada cuando hace clic en la etiqueta.

Andrea Turri
fuente
5

Lo usa con etiquetas para decir que dos objetos van juntos.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

Esto también significa que hacer clic en esa etiqueta cambiará el valor de la casilla de verificación.

PhonicUK
fuente
3

se usa para <label>elemento

se usa con la casilla de verificación de tipo de entrada o redio para seleccionar en la etiqueta haga clic

demostración de trabajo

rahul
fuente
3

El foratributo de la <label>etiqueta debe ser igual al atributo id del elemento relacionado para unirlos.

bipen
fuente
3

Para su información, si se encuentra en un entorno mecanografiado con, por ejemplo,

<label for={this.props.inputId}>{this.props.label}</label>

necesitas usar htmlPara

<label htmlFor={this.props.inputId}>{this.props.label}</label>
Stanley85
fuente
1

se usa en <label>texto para html

p.ej.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>
simplemente pon
fuente
1
No respondió la pregunta, el OP no preguntó cómo se usa.
cyber8200
1

Asocia la etiqueta con un elemento de entrada. Las etiquetas HTML están destinadas a transmitir un significado especial a los usuarios de varias categorías. Esto es para lo que está destinada la etiqueta:

  1. Para personas con discapacidades motoras (también para usuarios generales de mouse) : se puede hacer clic en las etiquetas de etiquetas utilizadas correctamente para acceder al control de formulario asociado. P.ej. En lugar de hacer clic especialmente en la casilla de verificación, el usuario puede hacer clic en una etiqueta en la que se puede hacer clic más fácilmente y alternar la casilla de verificación.
  2. Para usuarios con problemas visuales: los usuarios con problemas visuales utilizan lectores de pantalla que leen la etiqueta de la etiqueta asociada cada vez que se enfoca un control de formulario. Ayuda a los usuarios a conocer la etiqueta que, de otro modo, les resultaba invisible.

Más sobre etiquetado -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Kushagra Gour
fuente