HTML <fieldset> Tag

Tag fieldset examples are the topic of today’s post. With reasonable faith, it will satisfy the educational demands.

The HTML <fieldset> tag is used to group related form elements together within a web form. It provides a way to visually and semantically group form elements and helps to improve the organization and readability of web forms.

The <fieldset> tag is typically used in combination with the <legend> tag, which is used to provide a caption or title for the group of form elements within the <fieldset>. The <legend> tag should be placed immediately after the opening <fieldset> tag.

In a form, group elements that are related:

Example:

<!DOCTYPE html> <html> <body> <form action="/action-page.php"> <fieldset><legend>Educational Background:</legend> <br> <br> <label for="years">Years of Education</label> <input type="text" id="years" name="years"> <br> <br> <label for="mschool">Middle School</label> <input type="text" id="lname" mschool="mschool"> <br> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <br> <label for="heducation">Higher Education</label> <input type="heducation" id="heducation" name="heducation"> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>

You can used the following CSS codes to style <fieldset> and <legend>:

Example:

<!DOCTYPE html> <html> <head> <style> fieldset { background-color: #e6e1e1; } legend { background-color: lightgrey; color: white; padding: 3px 6px; } input { margin: 3px; } </style> </head> <body> <form action="/action-page.php"> <fieldset> <legend>Educational Background:</legend> <label for="years">Years of Education</label> <input type="text" id="years" name="years"> <br><br> <label for="mschool">Middle School</label> <input type="text" id="lname" mschool="mschool"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <label for="heducation">Higher Education</label> <input type="heducation" id="heducation" name="heducation"><br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>

Here is another example of the <fieldset> tag:

Example:

<!DOCTYPE html> <html> <body> <form> <fieldset> <legend>Select your favorite color:</legend> <input type="radio" id="red" name="color" value="red"> <label for="red">Red</label> <br> <input type="radio" id="blue" name="color" value="blue"> <label for="blue">Blue</label> <br> <input type="radio" id="green" name="color" value="green"> <label for="green">Green</label> </fieldset> <input type="submit" value="Submit"> </form> </body> </html>

Table Of Content-

HTML <fieldset> Tag:

Tag Fieldset Usage

Tag fieldset <fieldset> allows associated grouping elements in a form.

The <fieldset> tag creates a box that surrounds the related elements.

Advice: The <legend> tag specifies the caption associated with the fieldset element.

Attributes

Attribute	Value	Overview
disabled	disabled	Specifies the disablement of a group of related form elements.
form	form_id	Indicates the form to which the fieldset belongs.
name	text	Provide a name for the fieldset.

Browser Compatibility

Element
<fieldset>	Yes	Yes	Yes	Yes	Yes

Attributes

Global

In HTML, the <fieldset> Tag fieldset also accepts Global Attributes.

Event

Tag fieldset can also specify Event Attributes in HTML with the <fieldset>.

CSS Default Settings

A default value will be displayed by the majority of browsers for the <fieldset > element:

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);
}