fieldset (HTML element)

Description

The fieldset is a useful tool for organizing and grouping related items within a form, and has been used for a long time in desktop applications. When it’s combined with the legend (which is contained inside the fieldset, and is a required element if you use the fieldset), it has the effect of creating a box around the grouped items and showing a description to the right of each item, as shown below.

It’s also possible to nest fieldsets as a means to subgroup items, as shown here:

markup-maker-nested-fieldset

Example

This fieldset element is used to group three related XFN attributes (see the Microformats section regarding XFN):

<form>
  <fieldset>
      <legend>Friendship</legend>
      <input type="radio" name="radFriendship" value="Not_Applicable"
          id="radFriendNot_Applicable"/>
      <label for="radFriendNot_Applicable">Not_Applicable</label>
      <input type="radio" name="radFriendship" value="acquaintance"
          id="radFriendaquaintence"/>
      <label for="radFriendaquaintence">acquaintance</label>
      <input type="radio" name="radFriendship" value="friend"
          id="radFriendfriend"/>
     <label for="radFriendfriend">friend</label>
  </fieldset>
⋮
</form>

Use This For…

The fieldset attribute is used to logically group data items that share some characteristics. For example, you may wrap a fieldset around personal details, and another around work details, when capturing information about a visitor in an application form.

Frequently Asked Questions about HTML Fieldset Element

What is the primary function of the HTML fieldset element?

The HTML fieldset element is used to group related elements in a form. It draws a box around the related elements, which can be useful for visually organizing complex forms. The fieldset element is often used in conjunction with the legend element, which provides a caption for the fieldset.

How do I use the HTML fieldset element in my code?

To use the HTML fieldset element, you simply wrap the related form elements with the fieldset tags. Here’s a basic example:

<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email">
</fieldset>

In this example, the fieldset element groups the name and email input fields together, and the legend element provides a caption for the group.

Can I nest fieldset elements within each other?

Yes, you can nest fieldset elements within each other. This can be useful for creating more complex form layouts. However, keep in mind that each nested fieldset will create another box around its contents, so use this feature sparingly to avoid cluttering your form.

Are there any specific attributes for the fieldset element?

The fieldset element supports the global attributes in HTML. It also supports the form attribute, which specifies one or more forms the fieldset is part of, and the disabled attribute, which disables all the form controls inside the fieldset.

How does the disabled attribute work with the fieldset element?

When you add the disabled attribute to a fieldset element, all form controls inside the fieldset are disabled. This means that the user cannot interact with these controls, and their values are not submitted with the form.

How does the fieldset element affect accessibility?

The fieldset and legend elements can greatly improve form accessibility. The fieldset element groups related form controls together, which can help screen reader users understand how the controls relate to each other. The legend element provides a caption for the group, which can provide additional context for screen reader users.

Can I style the fieldset element with CSS?

Yes, you can style the fieldset element with CSS. You can change the border, padding, margin, and other properties. However, keep in mind that some browsers apply default styles to the fieldset element that can be difficult to override.

How does the fieldset element behave in different browsers?

The fieldset element is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, each browser applies its own default styles to the fieldset element, which can cause slight differences in appearance.

Can I use the fieldset element outside of a form?

While the fieldset element is typically used within a form to group related form controls, it’s technically possible to use it outside of a form. However, this is not common practice and may not be supported in all browsers.

What are some common use cases for the fieldset element?

The fieldset element is commonly used in forms that have multiple sections or groups of related controls. For example, a registration form might use a fieldset to group personal information fields, another fieldset for account information fields, and another for preferences.