Quel est l'attribut HTML for="" dans <label> ?

Question

J'ai vu cela dans jQuery - qu'est-ce que cela fait ?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Answer 1

El for est utilisé dans les étiquettes. Il fait référence à l'id de l'élément auquel l'étiquette est associée.

Par exemple :

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

Désormais, lorsque l'utilisateur clique avec la souris sur l'icône username le navigateur mettra automatiquement l'accent sur le texte correspondant. input champ. Cela fonctionne également avec d'autres éléments de saisie tels que <textbox> y <select> .

Citation du spécification :

Cet attribut associe explicitement l'étiquette en cours de définition avec un autre contrôle. Lorsqu'elle est présente, la valeur de cet attribut doit être la la même que la valeur de l'attribut id d'un autre contrôle du même document. même document. S'il est absent, l'étiquette définie est associée au contenu de l'élément. au contenu de l'élément.

En ce qui concerne la raison pour laquelle votre question est étiquetée avec jQuery et où vous l'avez vu être utilisé dans jQuery, je ne peux pas répondre car vous n'avez pas fourni beaucoup d'informations.

Il a peut-être été utilisé dans un sélecteur jQuery pour trouver l'élément de saisie correspondant à une instance de label :

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Answer 2

Pour associer le <label> avec un <input> vous devez donner à l'élément <input> un id attribut. Le site <label> a ensuite besoin d'un for dont l'attribut value est la même que celle de l'entrée id :

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

El for associe un <label> avec un <input> qui présente des avantages majeurs :
1. Le texte de l'étiquette n'est pas seulement associé visuellement à l'entrée de texte correspondante, il y est également associé programmatiquement. Cela signifie, par exemple, qu'un lecteur d'écran lira le libellé lorsque l'utilisateur se concentrera sur la saisie du formulaire, ce qui permettra à un utilisateur de technologie d'assistance de comprendre plus facilement quelles données doivent être saisies.
2. Vous pouvez cliquez sur l'étiquette associée pour focaliser/activer l'entrée, ainsi que l'entrée elle-même. Ce site augmentation de la zone de frappe offre un avantage à quiconque tente d'activer l'entrée, y compris ceux qui utilisent un appareil à écran tactile.

Ou bien vous pouvez imbriquer le <input> directement à l'intérieur du <label> Dans ce cas, l for y id ne sont pas nécessaires car l'association est implicite :

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

Notes :
Un input peut être associé à plusieurs étiquettes.
Lorsqu'un <label> est cliqué ou tapé et qu'il est associé à un contrôle de formulaire, l'événement de clic résultant est également déclenché pour le contrôle associé.

Problèmes d'accessibilité

Ne placez pas d'éléments interactifs tels que des ancres ou des boutons à l'intérieur d'une étiquette. Cela rendrait difficile l'activation de l'entrée de formulaire associée à l'étiquette.

Rubriques

Placer des éléments d'en-tête dans un <label> interfère avec de nombreux types de technologies d'assistance, car les titres sont couramment utilisés comme aide à la navigation. Si le texte de l'étiquette doit être ajusté visuellement, utilisez des classes CSS appliquées à l'en-tête de l'étiquette. <label> à la place.
Si un formulaire, ou une section d'un formulaire, a besoin d'un titre, utilisez le bouton <legend> placé dans un élément <fieldset> .

Boutons

Un site <input> avec un élément type="button" et un attribut de valeur valide n'a pas besoin d'être associé à une étiquette. Cela peut en effet interférer avec la façon dont les technologies d'assistance analysent l'entrée du bouton. Il en va de même pour l'attribut <button> élément.

Réf : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 3

Je ressens le besoin de répondre à cette question. J'ai eu la même confusion.

<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>

J'ai changé l'attribut for de l'étiquette "male" en "female". Maintenant, si vous cliquez sur "male", la radio "female" sera cochée.

C'est aussi simple que cela.

Answer 4

Un exemple rapide :

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

le site for="" permet également de mettre en évidence l'entrée lorsque vous cliquez sur l'étiquette.

Answer 5

Vous l'utilisez avec des étiquettes pour dire que deux objets vont ensemble.

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

Cela signifie également qu'en cliquant sur cette étiquette, la valeur de la case à cocher sera modifiée.