HTML <label> Element

Publish in HTML Tutorial el 24/05/2025 16:11

The <label> element is a crucial HTML tag that improves form accessibility and usability. It creates a caption for form elements like inputs, textareas, selects, etc. When properly associated with a form control, clicking the label focuses or activates the control, making the interface more user-friendly.

Key features of <label>:

Enhances accessibility for screen readers
Increases clickable area for form controls
Improves form organization and semantics
Can be associated with controls using either the "for" attribute or by nesting

Basic Syntax

Here's the basic structure of a label element:

Examples

1. Basic Label with Input

The most common use case - associating a label with a text input.

Play Code

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

2. Nested Label

Alternative method where the input is nested inside the label (no "for" attribute needed).

Play Code

<label>
  Subscribe to newsletter:
  <input type="checkbox" name="subscribe">
</label>

3. Label with Radio Buttons

Using labels with radio buttons creates a more accessible radio group.

Play Code

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>
<label>
  <input type="radio" name="gender" value="other">
  Other
</label>

4. Label with JavaScript (Focus)

This example shows how to use JavaScript to focus an input when its label is clicked.

Play Code

<label for="search" onclick="focusSearch()">Search:</label>
<input type="text" id="search">
<script>
function focusSearch() {
  document.getElementById('search').focus();
}
</script>

5. Label with JavaScript (Toggle Visibility)

This example demonstrates using JavaScript to toggle visibility of an input when clicking its label.

Play Code

<label for="password" onclick="togglePassword()">Password:</label>
<input type="password" id="password">
<script>
function togglePassword() {
  const passInput = document.getElementById('password');
  passInput.type = passInput.type === 'password' ? 'text' : 'password';
}
</script>

Tips and Tricks

Always use labels: Every form control should have an associated label.
Use "for" attribute: Explicit association is often clearer than nesting.
Style consistently: Use CSS to make your labels visually consistent.
Keep labels concise: Labels should be short but descriptive.
Consider placeholder text: Placeholders can supplement but not replace labels.