Detailed answer
Match the label for attribute to the input id, or nest the input inside its label.
This creates an accessible name and a larger clickable target. A visible label remains available after typing begins. Use a unique id for every field; the input name does not create this association.
Example
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email">
Understanding the behavior
A visible label gives the control a persistent name that remains available after typing. An explicit for value must match the input id exactly. Placeholder text is a hint inside a control and disappears or changes as the user enters a value.
Practical implementation notes
Click the label and confirm the corresponding input receives focus. Repeat the test when the form appears twice on a page, because duplicated IDs can break an otherwise correct-looking association.
How to check it
Compare the label for value with the input id character by character, then click the label.
Expected result
The associated email control receives focus.
Watch out: A placeholder is a hint rather than a replacement for a label.
Read the reference ↗