<fieldset>
By raae for Semantic Advent |
Long forms? Use fieldset to group it into logical sets of input!
The
<fieldset>
HTML element is used to group several controls as well as labels (<label>
) within a web form.
MDN Docs
My favorite <fieldset>
feature is that you may disable all inputs in a <fieldset>
with the disabled
attribute! You've probably been required to disable all fields in a form at some point and found that the <form>
element alone does not allow this. And if not all, at least a subset, and having to add disabled
to each input can get annoying: <fieldset>
to the rescue.
<form>
<fieldset disabled>
<legend>Choose your captain</legend>
<input type="radio" id="hal" name="captain" value="H" />
<label for="hal">Hal</label><br />
<input type="radio" id="lotta" name="captain" value="L" />
<label for="lotta">Lotta</label><br />
</fieldset>
</form>
In a longer form, it also makes sense to make use of the <legend>
element to appropriately name the set of inputs you've enclosed in the <fieldset>
.
Have you made use of <fieldset>
before?
And with that, Semantic Advent is on its way. Tell your friends!