# Assessment wanted for Form structure 1 skill test coding exercise

**URL:** https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035
**Category:** Learn
**Tags:** learning, feedback
**Created:** [November 4, 2021, 5:17am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035 "2021-11-04T05:17:38Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![torez233](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@torez233](https://discourse.mozilla.org/u/torez233)
#### Post date: [November 4, 2021, 5:17am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035/1 "2021-11-04T05:17:38Z")

</div>

Hi,

I’m currently following the awesome guide about forms and looking for an assessment on my [code](https://codepen.io/torez233/pen/XWaVGbw)

The original task page is: [https://developer.mozilla.org/en-US/docs/Learn/Forms/Test\_your\_skills:\_Form\_structure](https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure)

A few things that I’ve done in addition to what is asked in the task:

- make use of relative CSS units such as rem, em and ch in place of px
- make use of html semantic elements such as main and section
- make the form looks nicer 🙂

Thanks

---

<div class="post-metadata">

### Author: ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)
#### Post date: [November 4, 2021, 8:28am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035/2 "2021-11-04T08:28:35Z")

</div>

Hi @torez233 and welcome to the community 👋

Congratulations! Great work on the customization of the form. It looks very pretty. 💖

You used `section` and `h2` to separate the two parts of the form. There is another set of tags specifically created to separate parts inside forms. Those would also be good solutions. Can you guess what I am talking about?

From an accessibility point of view I would recommend having at least a font-size of 16px for the form. So instead of scaling down `rem` in `html` an making it bigger again in `.form`, it might be better to leave it at 16px in `html` and just use `1rem` inside `.form`.  
Something to think about regarding form font-size: [16px or Larger Text Prevents iOS Form Zoom](https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/)

I hope my feedback helps.  
Have a nice day!  
Michael

---

<div class="post-metadata">

### Author: ![torez233](https://avatars.discourse-cdn.com/v4/letter/t/8dc957/32.png) [@torez233](https://discourse.mozilla.org/u/torez233)
#### Post date: [November 5, 2021, 4:07am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035/3 "2021-11-05T04:07:20Z")

</div>

Hi @mikoMK thank you so much for reviewing it!

> [@mikoMK](#):
>
> You used `section` and `h2` to separate the two parts of the form. There is another set of tags specifically created to separate parts inside forms. Those would also be good solutions. Can you guess what I am talking about?

This is a good question! I guess you are referring to `fieldset` and `legend`? To my understanding, they are used to create logical grouping of control elements with similar semantics. `section` is more generic container and can be used to contain different kinds of control elements. If so, I get your point, and this is indeed a good place to use fieldset and legend

---

<div class="post-metadata">

### Author: ![mikoMK](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/mikomk/32/50456_2.png) [@mikoMK](https://discourse.mozilla.org/u/mikoMK)
#### Post date: [November 5, 2021, 11:44am UTC](https://discourse.mozilla.org/t/assessment-wanted-for-form-structure-1-skill-test-coding-exercise/88035/4 "2021-11-05T11:44:34Z")

</div>

Exactly! Those are the tags I meant. Well done 👍  
To make it clear: It’s not wrong to use `<section>`s. I can see its usage when we have a longer form where we like to put shipping address, payment address and payment information blocks into different sections.

`<fieldset>`s are also often used to group radio buttons.