Fieldset, this stranger.

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 specification

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.

— WHATWG

It's pretty clear what you should do with this element and when using it. As mentioned above it can also accept three attributes: form, name and disabled.

FORM

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.

NAME

The name of the group to use in the form.elements API

DISABLED

This is the same global attribute you use on buttons and inputs. It disable at once all the child elements.

A use case

Let's take a real example making a form with disabled sections controlled by checkboxes. In this form we will use label, inputs and the output element and we can build it by making the most of fieldset attributes and a bit of javascript.

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

Apart the javascript integration, the point here is fieldset element. It's live, it's standard and it's useful.

"Bad" examples from...

The following examples are neither wrong or correct, but why not break this loop of "not-so-good practices" and start improving our code the same way we iper-improve our javascript code?

Twitter Bootstrap

<div class="form-group">
  <label for="formGroupExampleInput">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput">
</div>

ZURB Foundation

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

Material Design Components

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

Tailwind CSS

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

Comments

[Brian Kephart]

Thanks for bringing this element to my attention, I wasn't aware of it before.

That said, resources I can find on it state that it is for groups of multiple inputs that answer a single question (think radio buttons), and should not be used for a single input with a single label, as in most of your examples (even though this seems more semantic and has useful properties). Can you comment on this, or point to a reference that supports such usage?

[Mattia Astorino]

In the article there is a link to the spec with examples. I suggest you to follow the specs to understand what you are doing, not to copy what others are doing because in the past years many bad practices were considered valid.

From the spec:

<fieldset name="letfields" disabled>
  <legend> <label>
   <input type=radio name=clubtype>
   My card has letters on it
  </label> </legend>
  <p><label>Card code: <input name=clublet required pattern="[A-Za-z]+"></label></p>
</fieldset>

[Brian Kephart]

Thanks for the response! I did read the spec, and every example I saw, including the one copied in your response, has at least two control elements within the fieldset. The case I was asking about is a single control element with a label, like this example from your post:

<fieldset>
  <input type="checkbox" id="enableCalc">
  <label for="enableCalc">Enable calc</label>
</fieldset>

I agree that this approach improves the clarity of the markup versus using a <div>, but I could not find such usage in the spec. Nothing in the spec says you cannot have a set with just one control element, though, and it clearly works, so I don't think the spec has any real problem with it.

Like I commented before, though, I found a few accessibility resources that specifically say not to use <fieldset> unless you need to group multiple controls together. No reason is given for the warning, but these same resources support the use of <fieldset> for groups of controls, so there seems to be something about this specific usage that is a potential issue, which is why I asked for your comment. I think the recommendation is just trying to avoid unnecessary verbosity when the markup is read by a screen reader, but I'm not sure.

[Mattia Astorino]

Even the table spec doesn't tell you to not use them for layouts :).
Fieldset can also be nested, so it's not correct to use it only to group radios.

[Charanjit Chana]

I use the < fieldset > tag often rather than a < div >, more semantic IMO and the < legend > tag is a nice way of clearly defining what it's all for.

Hadn't considered even trying the disable property and looking at the specs you can point to a form while not being part of it. Nice!

[Mattia Astorino]

Yes, the form attribute can be used also on other elements like the submit button.

[Nested Software]

fieldset was known to have issues in various browsers... Not sure about modern ones but I think that’s why it fell out of use.