<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!

Sign up and receive byte-sized emails about Semantic HTML Elements this advent with real-world use cases!