Assessment wanted for Form structure 1 skill test - fieldset vs section

Hi,
In the first item of the task it is written “Separate out the first two and second two form fields into two distinct containers, each with a descriptive legend”.
And legend is associated with fieldset.
In the article https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form
there is also an example with section and h2.
Is there any advantage of using fieldset over section?
Thanks,

Hello @Rafael_Green

hope that everything going fine with you

from semantic

fieldset is for form element giving them different group using legend
you use section is divide your page to parts

sticking to use the right element to the right job make your code better help with accessibility so if someone use screen reader also help from coding view if you read your code latter or someone elese read your code he will know the meaning of each part without the need to check every pit of it

from view perspective it offer some customization out of the box of course you can achive that by doing some work with css

hope that help and have a nice day :slight_smile:

1 Like

Here How to structure a web form - Learn web development | MDN
they used sections to divide the form to parts, and not the whole page.
So I am wondering how can I know what is the right element to use when dividing forms to parts (section or fieldset).
Is there a rule of thumb for chosing the right element in this case?

In this particular exercise, I thought that section is better than fieldset because name and age fields are not that strictly connected (and also comment and email)
Thanks,

@Rafael_Green generally, section is used to separate out different bits of functionality on a page, e.g. a form, a twitter widget, contact details, etc.

For different major parts of the form, e.g. name and address, payment details, other preferences, it is best to use fieldsets, with legends for accessibility. Beware of including too many form sections on the same page — it is better to split a large form into multiple pages for usability.

Inside each form fieldset, I’d recommend using a list item (li) to contain each label/control pair. But some people prefer to use divs.

1 Like

Thanks alot for the explanation.
Last question about this topic: is it a good practice to use nested fieldsets as well (for example using nested fieldsets in the payment example here: https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form#Common_HTML_structures_used_with_forms) ?

Hello @Rafael_Green

from syntax point of view it’s fine but i think that depend on the situation you need that

so for example is this form part of registration to your service then you should ask the min data
if it form for company that the user here is data entry then you would can have longer form

fieldsets is sectioning a from and nested mean you trying to split this section to smaller one

the question here if you nested it to make it smaller that mean you will split the parent fieldsets which make the related data splited but why you need that split would you use then in different page which make it to the question why you splited related data and if it will stay in same page why split them are they hug input or what that will bring to the upper question why we need it

so it depend but for my online life i did not see website has a nested fieldsets and they always use min data

and for data entry user you can think he/she would like the whole data in one page so he/she enter it then submit unless if there are reason to make it in different page

that my thought but i am student same as you

have a nice day :slight_smile:

1 Like

Thanks alot for the answer.
What do you mean by “min data”?

@Rafael_Green

you very welcome
i mean minimum data for example social media only ask of email and birthday and name

for ecommerce they ask in regisitration for name email then they pick the rest of data later like when you buy somehthing and at the checkout they start to ask you for shipping address and billing address and payment method
so it make you feel you enter so many data by splitting them and require them on time

and also as you know people stay more on mobile device so typing tons of data at once is not easy as keyboard and mouse on desktop device

when you start to learn about https://developer.mozilla.org/en-US/docs/Learn/Accessibility you will get those info

but always think of the user who use the app not from your view as developer

and have a nice day

1 Like