HTML <fieldset> Tag

The <fieldset> tag groups related input elements by drawing a surrounding box with a title. Fieldset elements are placed inside a <form> tag.

HTML Tag

Example

#

A <fieldset> tag.
This element groups input fields inside a form.

Customer Information





<form action="/tutorial/action.html">
  <fieldset style="background: #f6f8ff; border: 2px solid #4238ca;">
    <legend>Customer Information</legend>

    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="City" name="city"><br /><br />

    <div>
      <input type="checkbox" id="insurance" name="hasinsurance" value="hasinsurance">
      <label for="insurance">Has Insurance</label>
    </div>

    <input type="submit" value="Submit" />
  </fieldset>
</form>

Using <fieldset>

The <fieldset> tag is designed to group logically related HTML form elements.

This element renders a border around the grouped form elements .

The <legend> tag adds a caption to the <fieldset>'s border.

Tip: CSS allows you to customize the look-and-feel of the fieldset border and the caption.

More Examples

A login form with three input controls that are grouped by a <fieldset> tag.
The <legend> tag defines the title of the fieldset.

Login



<form action="/tutorial/action.html">
  <fieldset>
    <legend>Login</legend>
  
    <input type="text" placeholder="Email" name="email" id="email"><br /><br />
    <input type="password" placeholder="Password" name="password" id="password"><br /><br />

    <input type="submit" value="Submit" />
  </fieldset>
</form>

Attributes for <fieldset>

This table lists the <fieldset> attributes.

Attribute Value Description
id    identifier Defines a unique identifier for the fieldset.
class    classnames Sets one or more CSS classes to be applied to the fieldset.
style    CSS-styles Sets the style for the fieldset.
form form-id Specifies which form the fieldset belongs to.
name text The name of the fieldset
disabled disabled Disables a group of related form elements

For additional global attributes see our global attributes list.

Did you know?

Did you know?

Making <fieldset> fit its content with CSS

By default, the <fieldset> element occupies 100% of the parent width.

Adding this CSS: display:inline-block, the fieldset will tightly wrap its content.

A <fieldset> that tighly wraps its content.

Vehicle Details





<fieldset style="display:inline-block;">

  <legend>Vehicle Details</legend>

  <input type="text" placeholder="Make" name="make"><br /><br />
  <input type="text" placeholder="Model" name="model"><br /><br />  
  <input type="text" placeholder="Age" name="age"><br /><br />  

</fieldset>

Form Tags

The <fieldset> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, these tags allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

Here is when <fieldset> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides