×

html · level 2 · unit 1 · lesson 4

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. 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.