Assessment wanted for Form structure 1 skill test coding exercise

MDN Learn
,
#1

Hi,

I’m currently following the awesome guide about forms and looking for an assessment on my code

The original task page is: 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 :slight_smile:

Thanks

#2

Hi @torez233 and welcome to the community :wave:

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

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

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

2 Likes
#3

Hi @mikoMK thank you so much for reviewing it!

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

1 Like
#4

Exactly! Those are the tags I meant. Well done :+1:
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.

1 Like