Summary  
The chapter explains how to link text labels to form input elements by using the HTML `<label>` tag’s `for` attribute paired with the input’s `id`, improving accessibility and enabling automatic focus when the label is clicked.

General domain of usage  
Web forms


<u>Les labels (`<label>`) sont essentiels pour associer des textes descriptifs aux éléments de formulaire</u>, améliorant ainsi l'accessibilité et la convivialité. Il est crucial que **l'attribut `for` de la balise** `<label>` **corresponde à l'attribut** `id` **de l'élément** `input` **associé.** <br>**Exemple** :
```html
<label for="username">Username:</label>
<input type="text" id="username" />
```
Dans l'exemple ci-dessus :
- Lorsque vous cliquez sur le label `Username:`, le champ de saisie correspondant reçoit automatiquement le focus ;
- Le `label` et l'`input` sont reliés grâce aux attributs `for` et `id` respectivement ;
- Les attributs `for` et `id` ont la même valeur (`username`).

Faciliter la saisie dans le formulaire en ajoutant des labels aux champs de saisie de l'exemple précédent.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgICAgIDxsYWJlbCBmb3I9InRleHQtaW5wdXQiPkVudGVyIHlvdXIgbmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9InRleHQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQtaW5wdXQiPkVudGVyIHlvdXIgcGFzc3dvcmQ6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0ibWFpbCI+RW50ZXIgeW91ciBlbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9InBob25lIj5QaG9uZSBudW1iZXI6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9InRlbCIgaWQ9InBob25lIiAvPiA8YnIgLz4KCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0iY2hlY2tib3gtaW5wdXQiPkFncmVlIHdpdGggdGVybXMgYW5kIGNvbmRpdGlvbnM6PC9sYWJlbD4KICAgICAgPGlucHV0IHR5cGU9ImNoZWNrYm94IiBpZD0iY2hlY2tib3gtaW5wdXQiIC8+IDxiciAvPgoKICAgICAgPGxhYmVsIGZvcj0icmFkaW8taW5wdXQiPlNlbGVjdCB5b3VyIGdlbmRlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0icmFkaW8iIGlkPSJyYWRpby1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJmaWxlLWlucHV0Ij5VcGxvYWQgYSBmaWxlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJmaWxlIiBpZD0iZmlsZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRlLWlucHV0Ij5TZWxlY3QgYSBkYXRlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJkYXRlIiBpZD0iZGF0ZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJ0aW1lLWlucHV0Ij5TZWxlY3QgYSB0aW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0aW1lIiBpZD0idGltZS1pbnB1dCIgLz4gPGJyIC8+CgogICAgICA8bGFiZWwgZm9yPSJkYXRldGltZS1pbnB1dCI+TWFrZSBhbiBhcHBvaW50bWVudCBhdDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZGF0ZXRpbWUtbG9jYWwiIGlkPSJkYXRldGltZS1pbnB1dCIgLz4KICAgIDwvZm9ybT4KICA8L2JvZHk+CjwvaHRtbD4=

Quel attribut de la balise `<label>` est utilisé pour l’associer à un élément `<input>` spécifique dans un formulaire ?

Quel attribut manque à l’élément input pour qu’il soit associé à l’élément label ?

Construire des pages web structurées en utilisant HTML. Créer du contenu textuel, des liens, des listes, des images, des tableaux et des formulaires, et organiser l'ensemble avec des éléments sémantiques pour obtenir une page complète.

Étiquetage des Champs de Formulaire

1. Quel attribut de la balise `<label>` est utilisé pour l’associer à un élément `<input>` spécifique dans un formulaire ?

2. Quel attribut manque à l’élément input pour qu’il soit associé à l’élément label ?

Étiquetage des Champs de Formulaire

1. Quel attribut de la balise <label> est utilisé pour l’associer à un élément <input> spécifique dans un formulaire ?

2. Quel attribut manque à l’élément input pour qu’il soit associé à l’élément label ?

1. Quel attribut de la balise `<label>` est utilisé pour l’associer à un élément `<input>` spécifique dans un formulaire ?