0%
Illustration of three mountain peaks with flags and a climber on the middle one

Challenge · hard

HTML Registration Form Example: Fieldsets, Validation

About 35 minhard

By HTML6 (opens in a new tab) · Updated · How we write and check content

Goal: Build a long form in sections, with grouped fields and browser validation.

Learn

Nobody likes a wall of thirty fields. Split the form into topics: each <fieldset> holds one, and its first child is a <legend>. You can put a fieldset inside another one, which is handy for a set of radio buttons in a bigger section. The fieldset section of the HTML standard (opens in a new tab) allows this.

Choose the most specific input type you can. email, tel and date bring up the matching phone keyboard or a date picker. The browser checks required and maxlength before anything is sent. A long select gets easier to scan with <optgroup label>. A <datalist>, hooked up through list, offers suggestions but lets people type whatever they want.

A form that creates something uses method="post". Every control needs a name and a connected label. For more on required and the other checks, see the form validation lesson.

The short version

  • A long form splits into topics with <fieldset> and <legend>, and one group can sit inside another.
  • email, tel and date are more specific than text.
  • <optgroup> sorts a long option list; <datalist> offers suggestions.
  • The browser checks required and maxlength, and method="post" sends the data.

Example

<label for="fruit">Fruit</label>
<input id="fruit" name="fruit" list="fruits">
<datalist id="fruits">
  <option value="Apple"></option>
  <option value="Banana"></option>
</datalist>

Your task

The camp needs a sign-up form. Build it:

  1. Switch the form method to post and leave the action as it is.
  2. Use 3 or more fieldsets, and start each one with a <legend>.
  3. In 'About you', ask for full name, email (type="email"), phone (type="tel") and date of birth (type="date"). Give every text-like field an id and a <label for>; the page needs at least 5 of these labels.
  4. Make at least 3 controls required.
  5. Add a main activity select with 2 or more <optgroup> elements, each with a label.
  6. Add at least 2 radio buttons named week.
  7. Add a school field whose list attribute points to a <datalist> with 3 or more options.
  8. Add a notes <textarea> with a maxlength.
  9. Add a required checkbox for accepting the camp rules.
  10. Finish with a button that says 'Register'.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Frequently asked questions

What is a datalist in HTML?

It is a list of suggested values for one input. Give the <datalist> an id, fill it with <option value="..."> elements, then add list="that-id" to the input. Matching suggestions pop up as the visitor types. Unlike a <select>, it still accepts text that is not on the list. Browser support is wide, and Can I use (opens in a new tab) has the details.

How do I group options in a select dropdown?

Put related <option>s inside an <optgroup> that has a label: <optgroup label="Outdoor"><option>Hiking</option></optgroup>. The label shows up in the dropdown as a heading nobody can select. You cannot put one group inside another (see the optgroup definition (opens in a new tab)), and every option still needs its own value or text.

Tags in this lesson

<datalist>Suggested values for an input; people can still type whatever they like.<fieldset>Groups related form controls and names them with a legend.<label>Names a form control; clicking the label focuses the control.<legend>Names a fieldset and must come first inside it.<optgroup>Puts related options in a select under one label.<option>A single choice in a select, datalist or optgroup.<select>A drop-down menu of options.<textarea>A multi-line field for longer input such as messages.