html · level 2 · unit 7 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Plan the questions, build the form, then it like a visitor.
A good booking form starts on paper. List what you need to know, and nothing more. Group the questions that belong together, and decide which are required.
Then build it with what you know: a <fieldset> and <legend> for each group, the right input types, a name for every field, limits, help text and a button that says what happens.
Finally, test it by trying to break it. Leave boxes empty, type a wrong email, book for 40 people, use only the Tab key. Every gap you find now is one a visitor never meets.
<form action="https://example.com/book" method="post">
<fieldset>
<legend>Your visit</legend>
<label for="day">Date (required)</label>
<input type="date" id="day" name="day" required>
<label for="people">People (1 to 6)</label>
<input type="number" id="people" name="people" min="1" max="6">
</fieldset>
<button>Book my visit</button>
</form>Press show my page to see it here.
Testing with the keyboard alone shows you what many screen reader users meet.
guess first
A tester filled this in. Can it be sent yet?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<form action="https://example.com/book" method="post">
<label for="name">Name (required)</label>
<input id="name" name="name" required value="Sam">
<label for="mail">Email (required)</label>
<input type="email" id="mail" name="mail" required value="sam.example.com">
<button>Book</button>
</form>your turn
Your turn. Finish the contact questions.
Give the email box a name and make it required. Then give the phone box the type that brings a keypad.
Press show my page to see it here.
- the email box has a namenot checked yet
- the email is requirednot checked yet
- the phone box brings a keypadnot checked yet
fix it
Testing booked a visit for 0 people. Can you fix it?
Press show my page to see it here.
- the smallest booking is 1 personnot checked yet
- a booking for 0 is refusednot checked yet
- The label says 1 to 6. Does the box agree?
minsets the smallest number the box accepts.- Change
min="0"tomin="1"on line 5, then press run.
nailed it
you built and tested a real form. :D
- Plan the questions before you write any code.
- Group, name and limit every field.
- Test by trying to break it, with the keyboard too.
new words in your collection
- test
This lesson isn’t saved. A free account remembers every lesson you finish.