Text Inputs & Labeled Descriptions
What are Text Inputs & Labels?
Imagine a physical form with a box next to the label "Full Name". If the label wasn't there, you wouldn't know what to write in the box.In HTML:
<input type="text">: Renders a single-line textbox where users can type.<label>: Renders the text description of what the input is for.To connect them for accessibility, we use matching attributes:
1. Give the input a unique id (e.g., id="username").
2. Give the label a for attribute that matches that ID (e.g., for="username").
Why does it matter?
Connecting labels to inputs is critical for accessibility. When a blind user focuses on the textbox, screen readers read the matching label aloud. It also improves usability: clicking the label text automatically places the user's cursor inside the textbox!How to write it
<label for="username">User:</label>
<input type="text" id="username">
Common Mistakes
for and id attributes: If the for on the label does not match the id on the input exactly, they won't be linked, breaking accessibility.Quick Reference
<input type="text"> — Renders a single-line textbox.<label for="input-id"> — Links label text to a form input.Your Task
1. Create a `<label>` with `for="username"` displaying 'User:'.
2. Create an `<input>` with `type="text"` and `id="username"`.
index.html
Type code above to start the lesson.
Live Preview