Challenge - Validated form

Write a booking form with all validation attributes.

Form validation tools

HTML validates a form before it reaches the server. required blocks empty submissions; pattern enforces a format with a regular expression; min, max and step check numeric ranges.

For text length, use minlength and maxlength. <fieldset> and <legend> label groups; matching <label for> with id improves accessibility.

Exercise Write a booking form

Write a hotel booking form. Group fields with <fieldset> and <legend>. Add a <label for> with a matching id for each field. Use required, pattern, min, max and maxlength. Add a button with type="submit".

Show example solution

<form>
  <fieldset>
    <legend>Booking details</legend>
    <label for="name">Full name</label>
    <input type="text" id="name" name="name" required maxlength="60">
    <label for="date">Check-in date</label>
    <input type="date" id="date" name="date" required min="2026-01-01" max="2026-12-31">
    <label for="tel">Phone</label>
    <input type="tel" id="tel" name="tel" required pattern="[0-9]{3} [0-9]{3} [0-9]{4}">
  </fieldset>
  <button type="submit">Book now</button>
</form>

Test yourself

Phone pattern

<input type="tel" ____ name="tel" required>

Show answer

<input type="tel" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" name="tel" required>

Which attribute stops a field from being left empty?
- placeholder
- pattern
- required
- optional
Show answer

required — Correct. required forces the field to be filled.
Validation attributes

required

must fill
pattern

regular expression
min

minimum value
maxlength

max characters

Next lesson: Challenge - Semantic layout

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies