Why do we need a fieldset tag?

Another feature of fieldset is that disabling it disables all of the fields contained within it.

<fieldset disabled>
  <legend>Disabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

<fieldset>
  <legend>Enabled Fields</legend>
  <input type="text" value="Sample">
  <textarea>Text Area</textarea>
</fieldset>

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.


It's needed for accessibility.

Check out: http://usability.com.au/2013/04/accessible-forms-1-labels-and-identification/

The HTML 4 elements fieldset and legend allow you to layout and organise a large form with many different areas of interest in a logical way without using tables. The fieldset tag can be used to create boxes around selected elements and the legend tag will give a caption to those elements. In this way form elements can be grouped together into identified categories.

Different browsers may display the default fieldset border in different ways. Cascading Style Sheets can be used to remove the border or change its appearance.


As described here, the purpose of this tag is to provide clarity to the organization of the form and allow a designer easier access to decorate form elements.

Tags:

Html

Fieldset