The <fieldset> HTML Tag is used to group elements in a form that are related. The <fieldset> HTML Tag encloses the associated elements in a box. The <fieldset> HTML Tag is part of the Forms and Input HTML category in HTML Element Reference. The attributes of the <fieldset> HTML Tag are disabled, form, name, global attributes and event attributes.

<fieldset> code block example to learn how it works is given below.

<fieldset form="myForm" disabled>
form controls here
form controls here

The second example usage of the “<fieldset>” code block example is below.

<fieldset>
<p>Full Name: <input type="text" style="width:120px;"> Contact Number: <input type="text" style="width:120px;"></p>
<p>Address: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</fieldset>

Contents of the Article show

What is <fieldset> HTML Tag?

The <fieldset> HTML Tag is used to create a group of related form elements, and it also creates the box over the elements. HTML5 introduces the new <fieldset> HTML Tag. The <legend> HTML Tag is used to specify the title for the contents of a child. The <legend> HTML Tag is the parent element. This tag specifies the caption for the <fieldset> HTML Tag.

How to Use <fieldset> HTML Tag?

To use <fieldset> HTML Tag, the web developer should create <fieldset></fieldset> that contains the grouped form controls between the start and end tags. The disabled attribute is used to specify that all child form controls contained within the <fieldset> HTML Tag is disabled. The form attribute is used to connect the element to another form element within the same document.

Example Usage of <fieldset> HTML Tag?

The following example of usage of <fieldset> HTML Tag is given below.

<fieldset>
<p> Name: <input type="text" style="width:120px;"> Contact Number: <input type="text" style="width:120px;"></p>
<p>Email: <input type="text" style="width:120px;"></p>
</fieldset>
<fieldset>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</fieldset>

What are the Attributes of <fieldset> HTML Tag?

There are multiple attributes for the <fieldset> HTML Tag. The following attributes are listed below.

Disabled Attribute: The <fieldset> HTML Tag supports disabled attribute. The disabled attribute specifies the disabling of a group of related form elements.
Form Attribute: The <fieldset> HTML Tag supports form attribute. The form attribute specifies the form to which the fieldset belongs.
Name Attribute: The <fieldset> HTML Tag supports name attribute. The name attribute specifies the fieldset’s name.
Global Attributes: The <source> HTML Tag supports global attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
Event Attributes: The <source> HTML Tag supports event attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <fieldset> HTML Tag?

The following are the Default CSS Settings for the <fieldset> HTML Tag.

egend {
    background-color: #000;
    color: #fff;
    padding: 3px 6px;
}

.output {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}

What are the Related other HTML Tags to <fieldset>?

The other related HTML Tags to <fieldset> HTML Tag are listed below.

<button> HTML Tag: The <button> HTML Tag is related to <fieldset> HTML Tag because they are both forms and input tags. The HTML button is created using the <button> HTML Tag.
<optgroup> HTML Tag: The <optgroup> HTML Tag is related to <fieldset> HTML Tag because they are both forms and input tags. The <optgroup> HTML Tag denotes a group of options in a drop-down list.
<option> HTML Tag: The <option> HTML Tag is related to <fieldset> HTML Tag because they are both forms and input tags. The <option> HTML Tag defines the select element’s options.
<label> HTML Tag: The <label> HTML Tag is related to <fieldset> HTML Tag because they are both forms and input tags. The <label> HTML Tag is used to specify label for input element.
<legend> HTML Tag: The <legend> HTML Tag is related to <fieldset> HTML Tag because they are both forms and input tags. The caption for the fieldset element is defined using the <legend> HTML Tag.

Author
Recent Posts

Follow SEO

Holistic SEO

SEO Research Department at Holistic SEO & Digital

Holistic SEO & Digital has been built by Koray Tuğberk GÜBÜR. Holistic SEO is the process of developing integrated digital marketing projects with every aspect including Coding, Natural Language Processing, Data Science, Page Speed, Digital Analytics, Content Marketing, Technical SEO, and Branding. Structured, Semantic Search Engine improves its ability to detect the real-world entities, today. Having a simple website is not enough anymore. To show that your brand is authoritative, trustworthy, and expert on its own niche, you need entity-based Search Engine Optimization Projects. Holistic SEO & Digital's main focus is on improving the brand's organic visibility and growth potential.