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
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 fieldset
s, with legend
s 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 div
s.
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
Thanks alot for the answer.
What do you mean by “min data”?
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