HTML & CSS Interview Question #24

Why is the <label> element important in forms?

HTML Fundamentals, Structure, Semantics, Links, Images, Tables & Forms Junior Beginner

Quick Interview Answer

A label gives an input control an accessible name and makes the form easier to understand and operate. When a label is correctly associated with a control, selecting the label can also focus or activate that control.

Detailed Explanation

A label gives an input control an accessible name and makes the form easier to understand and operate. When a label is correctly associated with a control, selecting the label can also focus or activate that control.

A label can be connected explicitly using for with the input's id, or by wrapping the control. Placeholder text should not be used as a substitute for a persistent label.

Code Example

<label for="phone">Phone number</label>
<input id="phone"
       name="phone"
       type="tel">

<label>
    <input type="checkbox" name="remember">
    Remember me
</label>