Accessible Labels & Submit Buttons
A form without labels is confusing for humans and impossible for screen readers. The <label> tag pairs with an input using the for and id attributes. Clicking a label automatically focuses its linked input box or toggles its checkbox!
"Imagine medicine bottles without label stickers. You wouldn't know what is inside! The <label for="email"> sticker tells both your eyes and screen readers: "This input box is for your email address.""
Deep Dive: How It Works
The for/id Connection: Set <label for="user_email">Email</label> and match it on the input with <input id="user_email" type="email">.
Large Click Targets: When you click a connected <label>, it automatically checks checkboxes and focuses text inputs—huge for mobile usability.
<button type="submit">: Submits the parent form.
<button type="button">: General button for JavaScript actions (does NOT trigger form submission).
<button type="reset">: Resets all inputs in the form back to their original blank state.
Syntax Blueprint
<label for="uname">Username:</label> <input type="text" id="uname" name="username"> <button type="submit">Submit</button>
The label's "for" attribute matches the input's "id" attribute.
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Omitting the type attribute on buttonsWhy it happens: Inside a form, a plain <button> defaults to type="submit", which can accidentally refresh pages.
How to fix: Explicitly write <button type="button"> if you don't want form submission.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Link a label to an input with for and id
- Create a <label for="city">City:</label>
- Create an <input type="text" id="city"> directly after it
Finished reading and practicing?
Mark this lesson as completed to update your course progress.