html · level 1 · unit 7 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
type changes the box, and sends the form.
The type attribute changes what an input is for. type="email" expects an email address, type="number" expects a number, and makes a checkbox to tick.
A button is something people press to make things happen. Inside a form, <button> sends the form when clicked. Its words go between its tags, so say what happens, like Join the club.
For a checkbox, put the label after the box, so the tick sits on the left of its words.
<form>
<label for="age">Age</label>
<input type="number" id="age">
<input type="checkbox" id="news">
<label for="news">Send me news</label>
<button>Join the club</button>
</form>Press show my page to see it here.
Button words should say what happens, like Join the club, not only OK.
guess first
What will type="checkbox" make?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<input type="checkbox" id="tea">
<label for="tea">I like tea</label>your turn
Your turn. Finish the sign-up form.
Make the box on line 3 expect an email address. Then fill both blanks on line 4 so Sign me up becomes a button.
Press show my page to see it here.
- the box expects an email addressnot checked yet
- sign me up is a buttonnot checked yet
fix it
The thank-you is stuck in the button. Can you fix it?
Press show my page to see it here.
- the button says nextnot checked yet
- the thank-you is outside the buttonnot checked yet
- The thank-you words are inside the button. Where does the button end?
<button>needs a closing tag to say where its words stop.- Add
</button>straight after Next, then press run.
nailed it
your form is ready to send. :D
typechanges what an input expects.<button>makes something to press. Say what it does.- Close every
<button>you open.
new words in your collection
- checkbox
- button
This lesson isn’t saved. A free account remembers every lesson you finish.