A booking form with real rules – HTML Practice Problem

Apply a different rule to each field of a booking form.

What to build

A form with these rules, all using HTML attributes alone.

Requirements

guests: a number from 1 to 8, required.
date: a date input, required, with the earliest date 2030-01-01.
id: required, matching two capital letters followed by three digits, such as AB123.
hours: a number from 1 to 4 in steps of 0.5.
note: at most 100 characters.

Constraints

Every control needs a joined label. Do not use JavaScript.

Example

pattern="[A-Z]{2}[0-9]{3}" matches AB123.

Why it works

Each rule is in the most suitable attribute, so the browser can check everything at once. Remember that the server still has to check them again.

Hints

Hint 1

Dates use min in the form YYYY-MM-DD.

Hint 2

step decides which numbers are allowed.

Hint 3

A student code needs both letters and digits in its pattern.

Solution

Show one correct solution (try it yourself first)

<form>
  <label for="g">Guests</label>
  <input id="g" name="guests" type="number" min="1" max="8" required>
  <label for="d">Date</label>
  <input id="d" name="date" type="date" min="2030-01-01" required>
  <label for="i">Student ID</label>
  <input id="i" name="id" required pattern="[A-Z]{2}[0-9]{3}" title="Two capital letters and three digits, like AB123">
  <label for="h">Hours</label>
  <input id="h" name="hours" type="number" min="1" max="4" step="0.5">
  <label for="n">Note</label>
  <textarea id="n" name="note" maxlength="100"></textarea>
  <button>Book</button>
</form>

Lesson: Checking answers before they are sent →