HTML & CSS · 14-day planAll days
Build forms that collect information. Connect labels to inputs, pick the right input types for email, numbers, dates and choices, add dropdowns, text areas and buttons, and let the browser check answers with built-in validation.
By the end of today you can
- Build a form with form, label, input and button
- Connect each label to its input with for and id
- Choose input types such as email, number, date, checkbox and radio
- Use select, textarea and fieldset
- Add validation with required, min, max, minlength and pattern
Sign-ups, searches, checkouts, contact pages: forms are how websites ask for information. Today you'll build them properly, so they're easy to fill in on any device.
A first form
Try Subscribe with an empty email, then with hello, then with a real-looking address. The browser checks it, and when it's valid the preview shows what would be sent.
<form>: wraps the fields.actionis where the data goes;methodis how (getputs it in the URL,postsends it hidden in the request).<label for="…">+<input id="…">: always pair them. Clicking the label focuses the input, and screen readers announce the label.name: the key the value is sent under. No name, not sent.<button>inside a form submits it.
Inputs sit side by side because they're inline elements. CSS will tidy that up; for now, a <p> around each pair puts them on separate lines.
Input types
The type attribute changes the control, the phone keyboard and the checking:
| type | For | Bonus |
|---|---|---|
text (default) | Short text | |
email | Email addresses | Checks the format; @ keyboard on phones |
password | Passwords | Hides what's typed |
number | Numbers | min, max, step; number keyboard |
tel | Phone numbers | Phone keypad |
url | Web addresses | Checks the format |
date, time | Dates and times | A date picker |
checkbox, radio | Choices | See below |
placeholder shows a hint inside an empty field. It's not a replacement for a label: it disappears when you start typing.
Choices: checkboxes, radios and dropdowns
- Radio buttons sharing a
nameare a group: pick one. - Checkboxes: pick any number.
- Wrapping an input inside its
<label>connects them withoutfor/id. <select>+<option>: a dropdown, good for long lists.<textarea>: multi-line text.<fieldset>+<legend>group related fields under a caption.checked(orselectedon an option) sets the starting choice.
Validation
The browser can check answers before sending:
| Attribute | Checks |
|---|---|
required | Not empty |
minlength, maxlength | Length of text |
min, max, step | Numbers and dates |
pattern | Matches a regular expression |
type="email" / url | Looks like an email / web address |
Built-in validation helps users; it doesn't protect you. Anyone can switch it off, so the server that receives the form must always check the data again.
Recap
<form action method>wraps fields; a<button>sends it.- Pair every input with a
<label>(for+id, or wrap it). Give inputs aname. - Choose the right
type: email, number, date, tel, password… - Radios (one choice, same name), checkboxes (many),
select,textarea,fieldset. required,min,max,minlength,patterncheck input in the browser; always check again on the server.
That's the HTML toolkit. Tomorrow: CSS, and your pages start to look good.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
Why connect a <label> to its input with for="email" and id="email"?
- 2
What does the name attribute on an input do?
- 3
Why use type="email" instead of type="text" for an email address?
- 4
Three radio buttons should allow only one choice. What do they need in common?
- 5
Is the browser's required/pattern validation enough to keep bad data out?
Finished day 5?
Mark complete and continue to Day 6: Hello, CSSWas this lesson helpful?
Need a breather? Take a two-minute break