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