html · level 2 · unit 1 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Limits and patterns keep answers in a useful shape.
min and max set the smallest and biggest number a box accepts, so a table for 1 to 8 people refuses 40. Test it with value, which fills a box in before anyone types.
maxlength stops the typing after that many characters, and minlength asks for at least that many. A is one letter, digit, space or symbol.
describes the shape the whole answer must match. [0-9]{4} means four digits, each from 0 to 9, so 0451 passes and 451 does not. Explain the shape in the label too.
<form>
<label for="guests">Guests (1 to 8)</label>
<input type="number" id="guests" name="guests" min="1" max="8">
<label for="pin">Door code (4 digits)</label>
<input id="pin" name="pin" pattern="[0-9]{4}" maxlength="4">
<button>Book</button>
</form> Press show my page to see it here.
Inside a pattern, square brackets hold the allowed characters and curly brackets say how many.
guess first
Is this door code valid?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<label for="code">Door code (4 digits)</label>
<input id="code" name="code" pattern="[0-9]{4}" value="45a1">
your turn
Your turn. Set the limits for a football camp.
Players must be 6 to 12 years old. Fill in min and max, then give the box a starting value that fits inside your limits.
Press show my page to see it here.
- the youngest age is 6not checked yet
- the oldest age is 12not checked yet
- the box starts with a numbernot checked yet
- your starting age fits the limitsnot checked yet
fix it
Every membership number is turned away. Can you fix it?
Press show my page to see it here.
- a six-digit number is acceptednot checked yet
- the pattern asks for six digitsnot checked yet
- The label asks for 6 digits. How many does the pattern ask for?
- The number in curly brackets says how many digits are allowed.
- Change
{5}to{6}on line 3, then press run.
nailed it
your answers come in the right shape. :D
minandmaxset limits for numbers.minlengthandmaxlengthcount characters.patternsets the shape of an answer. Explain it in the label.
new words in your collection
- character
- pattern
This lesson isn’t saved. A free account remembers every lesson you finish.