Test your skills: Form structure

The aim of this skill test is to assess whether you've understood our How to structure a web form article.

Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.

If you get stuck, you can reach out to us in one of our communication channels.

Form structure 1

In this task we want you to structure the provided form features:

  1. Separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "Personal details" for the first two, and "Comment information" for the second two).
  2. Mark up each text label with an appropriate element so that it is semantically associated with its respective form field.
  3. Add a suitable set of structural elements around the label/field pairs to separate them out.

Download the starting point for this task to work in your own editor or in an online editor.