html · level 1 · unit 7 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
makes a box that visitors can type in.
A is a part of a page that asks visitors for information, like a sign-up sheet. Wrap it in <form>. An <input> makes a box to type in. It is empty, so no closing tag.
Every input needs a : words that say what to type. Use <label>, and give it a for attribute that matches the input's id.
Then clicking the words puts you straight into the box, and screen readers read the label out loud. Without one, the box is a mystery.
<form>
<label for="pet">Your pet's name</label>
<input id="pet">
</form>Press show my page to see it here.
The for and the id must match exactly, like the two halves of a ticket.
guess first
What will this form show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<form>
<label for="snack">Favourite snack</label>
<input id="snack">
</form>your turn
Your turn. Ask for a name.
Join the label to the box by typing the input's id in the for blank. Then write words that say what to type.
Press show my page to see it here.
- the label is joined to the boxnot checked yet
- the label has wordsnot checked yet
fix it
The words are on the wrong side. Can you fix it?
Press show my page to see it here.
- the words sit in a labelnot checked yet
- the label is joined to the boxnot checked yet
- The words appear after the box. Does anything join them to it?
<input>is empty, so it cannot hold words. Words for a box go in a<label>.- Put Your name in
<label for="name">above the input, and delete</input>.
nailed it
your page can ask questions. :D
<input>makes a box to type in.- Every input needs a
<label>. - The label's
formatches the input'sid.
new words in your collection
- form
- input
- label
This lesson isn’t saved. A free account remembers every lesson you finish.