HTML <fieldset> Tag - HTML Tag

The <fieldset> tag is used to group related elements in a form.

The <fieldset> tag draws a box around the related elements.

Tips and Notes

Tip: The <legend> tag is used to define a caption for the <fieldset> element.

How to create HTML <fieldset> Tag

Group related elements in a form

index.html

Example: HTML

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Output should be:

Which browser will support for HTML <fieldset> Tag

Attributes for HTML <fieldset> Tag

Attribute	Value	Description
disabled	disabled	Specifies that a group of related form elements should be disabled
form	form_id	Specifies which form the fieldset belongs to
name	text	Specifies a name for the fieldset

How to Use CSS to style <fieldset> and <legend>

The fieldset element + CSS

index.html

Example: HTML

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Output should be:

How to set Default CSS Settings for HTML <fieldset> Tag

Most browsers will display the <fieldset> element with the following default values:

index.html

Example: HTML

<style>
fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove (internal value);
}
</style>

Output should be:

How to add HTML <fieldset> disabled Attribute

Disable a group of related form elements.

Definition and Usage

The disabled attribute is a boolean attribute.

When present, it specifies that a group of related form elements (a fieldset) should be disabled.

A disabled fieldset is unusable and un-clickable.

The disabled attribute can be set to keep a user from using the fields until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the fieldset usable again.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Syntax

index.html

Example: HTML

<form>
<form action="/action_page.php">
  <fieldset disabled>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>
</form>

Output should be:

How to add HTML <fieldset> form Attribute

A <fieldset> element located outside a form (but still a part of the form).

Definition and Usage

The form attribute specifies the form the fieldset belongs to.

The value of this attribute must be equal to the id attribute of a <form> element in the same document.

Browser Support

Syntax

Attribute Values

Value	Description
form_id	Specifies the form element the <fieldset> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.

index.html

Example: HTML

<form action="/action_page.php" method="get" id="form1">
  <label for="favcolor">What is your favorite color?</label>
  <input type="text" id="favcolor" name="favcolor">
  <input type="submit">
</form>

<fieldset form="form1">
  <legend>Personalia:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" form="form1"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname" form="form1">
</fieldset>

Output should be:

How to add HTML <fieldset> name Attribute

A <fieldset> with a name attribute.

Definition and Usage

The name attribute specifies a name for a fieldset.

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Browser Support

Syntax

Attribute Values

Value	Description
name	Specifies the name of the fieldset

index.html

Example: HTML

<form action="/action_page.php" method="get">
  <fieldset name="personalia">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
  </fieldset>
  <br>
  <button type="button"
  onclick="form.personalia.style.backgroundColor='yellow'">
  Change background color of fieldset</button>
  <input type="submit">
</form>

Output should be:

Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference