Why do we need a <fieldset>
tag? Whatever purpose it serves is probably a subset of the form tag.
I looked up some info on W3Schools, which says:
<fieldset>
tag is used to group related elements in a form.<fieldset>
tag draws a box around the related elements.More explanation for those who are mistaking "why it exists in specification" for "what it does". I think the drawing part is irrelevant, and I don't see why we need a special tag just to group some related elements in a form.
Definition and Usage The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
You should use the fieldset and legend elements when you have a single multiple choice question as in you're using radio buttons or checkboxes or you have several questions relating to the same topic, like text boxes or any other type of field.
The HTML <fieldset> element is found within the <body> tag. It is used to group related labels and controls in the <form> tag. Most browsers will render the <fieldset> tag with a black border around it but you can change this behavior with CSS. You can use the <legend> tag to display a caption for the <fieldset>.
fieldset (plural fieldsets) (Internet) A group of related user interface controls that make up one portion of a form.
The <fieldset> tag in HTML5 is used to make a group of related elements in the form, and it creates the box over the elements. The <fieldset> tag is new in HTML5. The <legend> tag is used to define the title for the child's contents. The legend elements are the parent element.
They can be used to group any thematically related controls in a form such as address details, date of birth and sets of radio buttons or check boxes. Note: It is required that the fieldset and legend are used in conjunction. A fieldset cannot be used without a legend and visa versa.
The most obvious, practical example is:
<fieldset> <legend>Colour</legend> <input type="radio" name="colour" value="red" id="colour_red"> <label for="colour_red">Red</label> <input type="radio" name="colour" value="green" id="colour_green"> <label for="colour_green">Green</label> <input type="radio" name="colour" value="blue" id="colour_blue"> <label for="colour_blue">Blue</label> </fieldset>
This allows each radio button to be labeled while also providing a label for the group as a whole. This is especially important where assistive technology (such as a screen reader) is being used where the association of the controls and their legend cannot be implied by visual presentation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With