Use of Fieldset tag
HTML

What is the use of fieldset tag in HTML

Use of Fieldset tag

Hi, today I will explain about the use of Fieldset Tag in HTML. You can do amazing tasks by using this tag while creating a form on your website. First I will explain and then show you an example so that you will be able to understand it easily.

The fieldset tag can be used inside a form tag. You can use this tag to group related elements. It will draw a box with a border. Inside that box, you can add a legend tag to give a caption for the grouped elements and then your form elements.

You can disable all your form elements by using a disabled attribute with the fieldset tag.

Here is an example of it. You can copy the given HTML code and check yourself how it works.

<form>
  <fieldset>
    <legend>Personal Details:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
<fieldset>
    <legend>Education Details:</legend>
    Qualification: <input type="text"><br>
    Diploma: <input type="text"><br>
    Post Graduation: <input type="text">
  </fieldset>
</form>

Now try to add a disabled=”” attribute with it like the given example and see the magic.

<form>
  <fieldset disabled="">
    <legend>Personal Details:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
<fieldset>
    <legend>Education Details:</legend>
    Qualification: <input type="text"><br>
    Diploma: <input type="text"><br>
    Post Graduation: <input type="text">
  </fieldset>
</form>

I hope that now you understand how does it work. In case you need any help regarding this you can ask me. I will be glad to help you.

You may want to check How to use Fieldset Legend with Bootstrap.

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *