Labels, buttons, and required fields
Your roadmap for this lesson
- Connecting labels with for and id
- Button types: submit, button, reset
- required and built-in validation
- Checkboxes, radio buttons, and select menus
Short answer
Every field needs a <label> linked to it, so people and screen readers know what to type. Link them by matching the label's for to the input's id. Use <button type="submit"> with clear text. Add required to fields that must be filled, and the browser will stop empty submissions.
Labels
<label for="email">Email address</label>
<input type="email" id="email" name="email">When linked, clicking the label focuses the field. That makes small checkboxes much easier to tap on phones. Screen readers announce the label when the field gets focus.
Buttons
<button type="submit">Send inquiry</button>
<button type="button">Show more options</button>Inside a form, a button with no type acts as submit. Always set the type. Write button text as an action: Book my room beats Submit. Avoid reset buttons. People click them by mistake and lose everything.
Required fields and validation
<label for="mobile">Mobile number (required)</label>
<input type="tel" id="mobile" name="mobile" required pattern="09[0-9]{9}">required blocks submission when empty. pattern checks a format, here an 11 digit mobile number starting with 09. Tell people a field is required in the label text, not only with a red star. Browser checks help, but the server must check again, since anyone can bypass HTML.
Checkboxes, radios, and select
<fieldset>
<legend>Delivery option</legend>
<input type="radio" id="pickup" name="delivery" value="pickup">
<label for="pickup">Store pickup</label>
<input type="radio" id="deliver" name="delivery" value="deliver">
<label for="deliver">Deliver to my address</label>
</fieldset>
<input type="checkbox" id="news" name="newsletter">
<label for="news">Send me promos by email</label>
<label for="city">City</label>
<select id="city" name="city">
<option value="legazpi">Legazpi</option>
<option value="naga">Naga</option>
</select>Radio buttons with the same name allow one choice. Checkboxes allow many. <fieldset> and <legend> group related options and give the group a title.
Try it: connect the labels
None of the labels are connected. Add matching for and id values, make name and mobile required, and give the button clear text.
Live preview
Quick quiz
Common mistakes
- Unlinked labels. Screen readers announce an unnamed field.
- Submit as button text. Say what happens, like Send message.
- Required shown only by color. Write required in the label text.
- Reset buttons. Easy to click by mistake.
Your action
Tick each item when you can do it. Your progress saves on this device.
Key terms
- <label>
- A caption tied to a form field.
- for attribute
- Links a label to the field with that id.
- required
- Prevents submitting an empty field.
- pattern
- A format rule for an input.
- Radio button
- A choice where only one option can be picked.
- Checkbox
- A box for yes or no, or several choices.
- <fieldset>
- Groups related form fields with a legend.
Questions beginners ask
Can I wrap the input inside the label?
Yes. That links them too, but for and id is the most reliable.
How do I mark optional fields?
Many forms only mark the optional ones, which keeps labels short.
Why does my form submit when I click any button?
Buttons default to submit. Add type="button" to non-submit buttons.
Related lessons
Need a website built or fixed while you practice? The team at Remar Digital can help.