Labels & Fields.

Forms chapter. A form is the bridge between a person and your code — and a good form starts with a label that is tied to its field.

Theory. <label for="email"> connects to <input id="email"> when the value of for equals the id exactly. Then a click on the text focuses the field, screen readers announce the label, and on phones the touch target is bigger. If for and id differ, the label is just text next to the field.

In JS there are two ways to repair the link: label.setAttribute("for", "email") (or label.htmlFor = "email") and input.id = "email". Both sides are valid — what matters is that they match.

Small examples:

const label = document.querySelector("#l-name"); label.htmlFor = "name"; const field = document.querySelector("#town"); field.id = "city";

Common mistake: changing both sides to different values; forgetting that id must be unique on the page; using name instead of id (name is for FormData, not for for).