HTML <fieldset> Definition, Usage and Examples

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>

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.

Holistic SEO
Follow SEO

Leave a Comment