Learn HTML – Part 39 – label Tag – Form Labels

The HTML label tag is used to define a label for form input elements.

Labels help users understand what information they need to enter in an input field.

What is the label Tag?

The label tag represents a text description for an input field.

It improves usability and accessibility by clearly identifying form controls.

Basic Syntax

<label>Name:</label>
<input type="text">

Example – Simple Label

<form>

   <label>Name:</label><br>
   <input type="text">

</form>

Output:

Using the for Attribute

The for attribute connects a label with a specific input element.

The value of the for attribute should match the id of the input field.

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

Example – Label with Input Association

<form>

   <label for="email">Email:</label><br>
   <input type="email" id="email">

</form>

Output:

Benefits of Using label

• Improves accessibility for screen readers
• Makes forms easier to understand
• Allows users to click the label to focus the input field
• Improves overall user experience

Using labels makes forms more user-friendly and accessible.

Example – Complete Form with Labels

<form>

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

   <br><br>

   <label for="email">Email:</label><br>
   <input type="email" id="email">

</form>

Common Mistakes Beginners Make

• Not associating labels with inputs
• Using labels without meaningful text
• Forgetting to use the for attribute

Conclusion

The HTML label tag is used to define labels for form inputs.

It improves accessibility, usability, and clarity of HTML forms.

What’s Next?

Now that you understand the label tag, the next step is learning about the textarea tag, which is used to create multi-line text input fields.

Next: Learn HTML – Part 40 – textarea Tag – Multi-line Input →

Series: Learn HTML Series