HTML Fieldset Tag


There are certain HTML tags that help you in beautifying the overall appearance of web pages. One such tag is the fieldset tag of HTML, and in this article, we will learn to use this HTML tag in the easiest manner.

Purpose of the Fieldset Tag in HTML:

The fieldset tag in HTML is used for grouping similar kinds of data. This tag finds its usage, especially within web forms and documents like resumes, etc. in which there are diverse kinds of information. It is very convenient for the reader if that information is not scattered but grouped into different fields.

Usage of the Fieldset Tag in HTML:

To use the fieldset tag in HTML, you have to go through the following two examples:

Example # 1: The Fieldset Tag for Collecting Personal Information:

In this example, we want to use the fieldset tag in HTML to collect the user’s personal information. We want to group all this information into a different field. For that, we have used the HTML script shown in the image below:

In this HTML script, we have used the fieldset tag in HTML to collect the user’s personal information. To define a label for this field, we have used the HTML legend tag. Then, we have created three text input fields within the fieldset tag of HTML for collecting the user’s first name, last name, and email address.

When we executed this HTML script within our browser, the following web page was displayed, which shows all the personal information collection fields nicely grouped together.

Example # 2: The Fieldset Tag for Collecting Personal Information along with Educational Details:

In this example, we will simply expand our first example by adding another fieldset tag for collecting the user’s educational details. To do so, we have made the additions shown in the image below to our diferente HTML script:

In this example, we have simply used another fieldset tag with the legend “Educational Qualification.” Within this fieldset, we wanted to collect the total years of education of the user as well as the highest level of education attained, because of which we have created two more text input fields.

When we executed this HTML script, a full-fledged form comprising the user’s personal details as well as the education details appeared on our browser, as shown in the following image:

Conclusion:

The HTML fieldset tag is used for grouping similar data together. Therefore, we wrote this article to convey to you the correct usage of this tag in HTML. We mapped the usage of this tag to two different examples. After reading these examples, you will be in a good position to start using the fieldset tag in HTML right away.



Source link