Labels

Definition

The `<label>` element represents a caption for an item in a user interface, specifically tying text to a specific form input.

Explain Like I'm New

If you just type text next to a checkbox, clicking the text does nothing. If you wrap that text in a `<label>` and link it to the checkbox, clicking the text will magically check the box! This makes forms vastly easier to use, especially on mobile devices where checkboxes are tiny.

Real World Example

Every properly built form on the internet uses labels. Without them, screen readers don't know what an input box is for, and blind users won't know what to type.

Common Use Cases

•Form accessibility
•Improving click targets for small inputs like radio buttons

Interactive Example

Interview Questions

basic

How do you link a `<label>` to an `<input>`?

intermediate

What happens if you click a properly linked label?

Flash Cards

Question

How to link them?

Click to reveal answer

Answer

Give the `<input>` a unique `id` attribute. Then, give the `<label>` a `for` attribute with the exact same value. (e.g., `<label for="email">` and `<input id="email">`).

Question

What happens when clicked?

Click to reveal answer

Answer

The browser automatically transfers focus to the linked input. For text boxes, the cursor appears. For checkboxes/radios, they toggle on or off.