Practice: Test Your Skills, Form Structure
Now that you have worked through building a web form, you can test your skills and build a structure that has given parameters. You may try this in the given editor, or if you are using some other editor to work on your forms, feel free to use it to test your knowledge. This exercise does not count toward your grade. It is just for practice!
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 out the solution in the interactive editor below, however, it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
Form structure 1
In this task, we want you to structure the provided form features:
- Separate 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).
- Mark up each text label with an appropriate element to be semantically associated with its respective form field.
- 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 editor or an online editor.
Source: Mozilla, https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.