Field..wat?? Yep, it still exist but no one seems to remember it. This guy is a living standard form element that is made to represent a set of elements inside a form or grouping related elements like labels, inputs, meters, paragraphs etc... and it doesn't end here, it can be nested and can contains any kind of elements.
Are you still interested? So i will tell you two more things, it can also accept three really useful html attributes that will help you making your beautiful forms aaaand....it's not made to wrap only radio buttons! 😱
The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any.
It's pretty clear what you should do with this element and when using it. As mentioned above it can also accept three attributes:
This attribute allows you to associate a group of inputs to a specific form element that is not its ancestor. This means that you can fix the lack of the possibility to nest forms.
The name of the group to use in the form.elements API
This is the same global attribute you use on buttons and inputs. It disable at once all the child elements.
<form id="calculatorForm"> <fieldset> <input type="checkbox" id="enableCalc"> <label for="enableCalc">Enable calc</label> </fieldset> <fieldset name="calculator" disabled> <!-- Default formula --> <fieldset name="defaultcalc"> <input type="checkbox" id="default" checked> <label for="default">Use default calculation</label> </fieldset> <!-- Custom formula --> <fieldset name="customcalc" disabled> <label>Use custom calculation</label> <input type="number" value="50" id="c">+ <input type="number" value="50" id="d">= <output id="x" for="c d">100</output> </fieldset> </fieldset> </form>
In this example we have a form with a fieldset named "calculator" which is disabled by default. When clicking the
enableCalccheckbox the calculator area will be enabled. Here the live demo.
fieldset element. It's live, it's standard and it's useful.
<div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput"> </div>
<div class="input-group"> <input class="input-group-field" type="url"> <div class="input-group-button"> <input type="submit" class="button" value="Submit"> </div> </div>
<div class="mdc-form-field"> <div class="mdc-checkbox"> <input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/> <div class="mdc-checkbox__background"> ... </div> </div> <label for="my-checkbox">This is my checkbox</label> </div>
<div class="mb-4"> <label class="block text-grey-darker" for="username">Username</label> <input id="username" type="text" placeholder="Username"> </div>
As you can see many popular frameworks don't use fieldset (bootstrap mention it but nothing more) as form elements container and that's really weird because HTML have all the tools we need to build our webpages and applications. We should not recreate what the platform already provide, instead we just need to learn it and eventually how to extend it, for example with web components.