fieldset element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The fieldset element represents a set of controls in a form, optionally grouped under the same name. This element can be specially useful in large forms, where readability and ease of access can be improved with segmentation. Browsers will most likely render a frame around the grouped controls.

A fieldset can additionally have a title or name, that can be provided by legend. In such case, the legend element must be the first child of the fieldset.

Examples

In our first example, we're grouping thematically the controls in a form. All controls in a group are contained by a fieldset, and are declared after its legend.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Personal information</legend>
    <p>Full name: <input type="text" name="fullname"></p>
    <p>Address: <input type="text" name="address"></p>
    <p>Phone number: <input type="tel" name="phone"></p>
  </fieldset>
  <fieldset>
    <legend>Work information</legend>
    <p>Company: <input type="text" name="company"></p>
    <p>Address: <input type="text" name="workaddress"></p>
    <p>Phone number: <input type="tel" name="workphone"></p>
  </fieldset>
  <p><input type="submit" value="Send information"></p>
</form>
Personal information

Full name:

Address:

Phone number:

Work information

Company:

Address:

Phone number:

A fieldset can be optionally disabled, by setting the boolean attribute disabled in the element. When a fieldset is disabled, all of its children are disabled too.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>Delivery information</legend>
    <p>Full name: <input type="text" name="fullname"></p>
    <p>Address: <input type="text" name="address"></p>
    <p>Phone number: <input type="tel" name="phone"></p>
  </fieldset>
  <fieldset disabled>
    <legend>Subscription information</legend>
    <p>E-mail address: <input type="email" name="emailaddress"></p>
    <p><input type="checkbox" name="suscribe"> Receive e-mails with promotions and oppportunities.</p>
  </fieldset>
  <p><input type="submit" value="Send information"></p>
</form>
Delivery information

Full name:

Address:

Phone number:

Subscription information

E-mail address:

Receive e-mails with promotions and oppportunities.

The legend element may contain other elements. This can be useful in certain situations like the one shown in the following example. There, the legend element has, besides the title for the ser of controls, a checkbox that, through a client-side program, allows the entire group of controls to be enabled or disabled.

<form action="../../form-result.php" target="_blank">
  <fieldset>
    <legend>
      <label>
        <input type="checkbox" name="subscription" checked onchange="switchFieldset(this)"> Suscribe to the newsletter
      </label>
    </legend>
    <p>E-mail: <input type="email" name="e-mail"></p>
  </fieldset>
  <p><input type="submit" value="Sen data"></p>
</form>

E-mail:

Attributes

Specific attributes

disabled

A boolean value indicating wether the group and its controls are disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the group and its controls will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" target="_blank">
  <fieldset disabled>
    <legend>Basic info</legend>
    <p>Nickname: <input type="text" name="nickname"></p>
    <p>E-mail address: <input type="email" name="emailaddress"></p>
  </fieldset>
  <p><input type="submit" value="Send information"></p>
</form>
Basic info

Nickname:

E-mail address:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

The association of a fieldset with a form doesn't imply that the controls inside of it will be associated too. Controls must be associated independently.

Example

<fieldset form="form1">
  <legend>Extra info</legend>
  <p>Favorite artist: <input type="text" name="favoriteartist"></p>
  <p>Favorite song: <input type="text" name="favoritesong"></p>
</fieldset>
<form id="form1" action="../../form-result.php" target="_blank">
  <p><input type="submit" value="Send information"></p>
</form>
Extra info

Favorite artist:

Favorite song:

name

A name for the fieldset to be used in form submission and client-side scripting.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Example

<form action="../../form-result.php" target="_blank">
  <fieldset name="cardinfo">
    <legend>Card information</legend>
    <p>Number: <input type="text" name="cardnumber"></p>
    <p>Expires on: <input type="date" name="expireson"></p>
    <p>Security code: <input type="number" name="securitycode"></p>
  </fieldset>
  <p><input type="submit" value="Send information"></p>
</form>
Card information

Number:

Expires on:

Security code:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.