The <label> tag defines a label for form elements like inputs, textareas, and selects. It improves accessibility by associating text with form controls, making forms easier to use for everyone, especially screen reader users.

<label

Connect a label to an input using the 'for' attribute on the label matching the 'id' attribute on the input. When users click the label, the associated input receives focus. This is essential for accessibility and better UX.

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

You can also wrap the input inside the label (implicit association). Both methods work, but explicit association with 'for' and 'id' is preferred for clarity. Always include labels for all form inputs to ensure accessibility.

<label>
  Username:
  <input type="text" name="username">
</label>

In the browser, clicking the label text focuses the associated input. Screen readers announce the label when the input receives focus. This makes forms accessible and user-friendly.

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

Checkpoint: Which attribute connects a label to an input field?

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

Correct! The 'for' attribute on the label connects it to the input's 'id'. This creates an explicit association that improves accessibility and allows clicking the label to focus the input.

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

Now it's your turn. Labels are essential for accessible forms. Complete the challenges below to master the <label> tag!

label.html

1 / 7

🏷️

Tutor:The <label> tag defines a label for form elements like inputs, textareas, and selects. It improves accessibility by associating text with form controls, making forms easier to use for everyone, especially screen reader users.

⭐ 0 EXP

Label Mastery

Unlock nodes by learning label attributes and form accessibility.

Concept 1: The Label Tag

The <label> tag defines a label for form elements like inputs, textareas, and selects. It improves accessibility by associating text with form controls, making forms easier to use for everyone, especially screen reader users.

System Check

Which attribute connects a label to an input field?

idfornametype

Community Holo-Net

Share Accessible Forms

Created accessible forms with proper labels? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <label> Tag

Pascual Vila

Frontend Instructor.

Connecting Labels to Inputs

Connect a label to an input using the for attribute on the label matching the id attribute on the input. When users click the label, the associated input receives focus. This is essential for accessibility and better UX.

Explicit vs Implicit Association

You can also wrap the input inside the label (implicit association). Both methods work, but explicit association with for and id is preferred for clarity and better control over styling and layout.

Accessibility Benefits

Labels improve accessibility by associating text with form controls. Screen readers announce the label when the input receives focus. Clicking the label focuses the input, making forms easier to use, especially on mobile devices.

Best Practices

Always include labels for all form inputs to ensure accessibility. Use explicit association with for and id when possible. Make label text descriptive and clear. Never use placeholder text as a replacement for labels.

Label Tag Glossary

<label>: HTML element that defines a label for form elements like inputs, textareas, and selects. Improves accessibility by associating text with form controls.
for Attribute: Attribute on the label that connects it to an input by matching the input's id attribute. Creates an explicit association between label and input.
id Attribute: Attribute on the input that matches the label's for attribute. This creates the connection between label and input for accessibility.
Explicit Association: Using the for attribute on the label matching the id on the input. Preferred method for clarity and better control over styling and layout.
Implicit Association: Wrapping the input inside the label element. Works but explicit association is preferred. Both methods improve accessibility.

📖 INDEX