HTML Labels and Input Types
The <input> element is one of the most useful form controls. Its type attribute changes what kind of input it accepts. Common types include text, email, password, number, date, checkbox, radio, and file. A <label> gives a form control a human-readable name. Connect the label to the input by making the label's for value match the input's id. Example: <label for="email">Email</label> and <input id="email" type="email">. Clicking the label can focus the input, and assistive technology can understand the relationship.
Why this matters
- ·Labels make forms easier to understand and use.
- ·Input types give browsers useful built-in behavior.
- ·Email, number, and other types can provide better mobile keyboards and validation.
Common mistakes
- ·An unlabeled field can be confusing for screen reader users.
- ·Using the wrong input type can give users the wrong keyboard or validation.
- ·Do not collect information you do not need.
Frequently asked questions
It tells the user what the field is for and connects the field to assistive technology.
Practice questions
Question 1
Create a labeled email field.
Question 2
Create a checkbox labeled "I agree".
Quick check
Just for this topic answer honestly, then check yourself.
1 / 3