The <fieldset> tag groups related input elements.
It does this by drawing a surrounding box with a legend.
Fieldset elements are placed inside a <form> tag.
This <fieldset> element groups the input fields inside a form.
<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>
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.
A login form with three input controls that are grouped by a <fieldset> tag.
The <legend> tag defines the title of the fieldset.
<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>
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.
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.
<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>
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, they 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 |
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 |
