Labeling Form Inputs

Labels (<label>) are essential for linking text labels with form input elements, enhancing accessibility and user-friendliness. It's crucial that the for attribute of the <label> tag matches the id attribute of the associated input element.
Example:

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

In the example above:

• When you click the Username: label, it will automatically focus on the corresponding input field;
• The label and input are linked together using the for and id attributes, respectively;
• Both for and id attributes have the same value (username).

Let's make filling in the form easier by adding labels to the inputs from the previous example.