Why do we need a fieldset tag?

Eastern Monk picture Eastern Monk · Mar 16, 2012 · Viewed 87.2k times · Source

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:

  • The <fieldset> tag is used to group related elements in a form.
  • The <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.

Answer

Quentin picture Quentin · Mar 16, 2012

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.