What is Form fieldset and legend ?

Form fieldset

Fieldset is used to split various input field the visual group. If the ‘Group is split, It would look like a rectangular box on the form. As a result fill in the form is to facilitate.



Use of fieldset and legend element:

Using the legend element with field set element label can be created in the field group. To do this, first need to use <fieldset>…………</fieldset> tag and then <legend>………..</legend> tag. Both start and end tags exist.

Browser support:
ElementGoogle ChromeInternet ExplorerMozilla FirefoxOperaSafari


Global Attributes: The <fieldset> tag also supports all the global attributes described in – HTML Attribute Reference.

Event Attributes: The <fieldset> tag also supports the entire event attributes described in – HTML Events Reference.


This element is used to add a caption in filed set group.



<legend> Align attribute:

Align attributes set alignment of the fieldset caption. All the major browsers support left and right value of this attribute (without opera).


<legend align=”left|right|top|bottom”>

Browser Support:
ElementGoogle ChromeInternet ExplorerMozilla FirefoxOperaSafari


Global Attributes: The <legend> tag also supports all the global attributes described in – HTML Attribute Reference.

Event Attributes: The <legend> tag also supports the entire event attributes described in – HTML Events Reference

The align attribute does not support in HTML5.



This value not supported in HTML5.

Specifies the alignment of the  caption.



Html code:

<!doctype html>
<h2>Example of filedset tag in html5.</h2>
<legend>Employee Details.</legend>
Employee ID: <input type="text" name="EmpId"></br>
Employee Name: <input type="text" name="EmpName"></br>
Employee Address: <input type="text" name="Empaddress"></br>
Employee Post: <input type="text" name="postname"></br>

Explain HTML Code:

Notice the above code. See the <h2> tag is written in the form tag here. Example of filedset tag in html5 is written as the value of <h2> tag. That means, the example of filedset tag in html5, you will see that in the browser it shows that the size is larger than normal writing. Because html <h2></h2> tag has been used. Then fieldset tag has been used in the example. Legend tag is used in the Fieldset tag and its value is set as Employee Details. Here you can use any value. Now if you look at the browser shown below in the example, then you will understand how your content is used in the legend tag. However, after that we have used the input tag and used text as its value. You can copy the above example and paste it, the HTML code editor software such as Notepad ++, Adobe Dreamweaver or any such software, and then practice it.

Display in Browser:

<!doctype html>

Example of filedset tag in html5.

Employee Details.

Employee ID:
Employee Name:
Employee Address:
Employee Post:



Html code:

<!doctype html>
<fieldset style="text-align:right;">
<legend><b>Address Details</b></legend>
Favorite Address:<input type="text" style="width:120px;"/></br>
Least Favorite Address:<input type="text" style="width:120px;"/></br>
Current Address:<input type="text" style="width:120px;"/></br>
Permanent Address:<input type="text" style="width:120px;"/></br>

Explain HTML Code:

Look at the example-2. If you understand the way in the previous example-1, you can understand this example very easily. Here is the address of the <legend> tag written. You know that this element is used for field grouping. Also, using the style tag inside the <fieldset> tag, , you just get the text align that you see on the browser displayed below.

Display in Browser:

<!doctype html>

Address Details

Favorite Address:
Least Favorite Address:
Current Address:
Permanent Address:



Html code:

<form name="feedback" method="post"  
<legend><strong>1. Personal Information</strong></legend>
Name: <input type="text" name="mail" size="40" /><br />
Date of Birth: <input type="text" name="mail" size="15" 
value="mm-dd-yyyy" /><br />
Interest: <input type="checkbox" name="interest" 
value="internet">Surfing the web
   <input type="checkbox" name="interest" 
value="Reading">Reading books<br />
Email: <input type="text" name="mail" /><br />
Country: <select name="user_country" size="1">
<option selected="selected">Philippines</option>
<legend ><strong>2. Rate Our Website</strong></legend>
<input type="radio" name="rating" value="Great" 
checked="checked" />It's Great!
<input type="radio" name="rating" value="Good" />It's Good!
<input type="radio" name="rating" value="Fair" />It's Fair!
<input type="radio" name="rating" value="Poor" />It's Poor!
<legend><strong>3. Give Us Your Comment To Further 
Improve Our Website</strong></legend>
<textarea name="comment" rows="3" cols="50"></textarea>
Thanks for visiting!<br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">

Display in Browser:


1. Personal Information

Date of Birth:
Interest: Surfing the web
Reading books

2. Rate Our Website

It’s Great!
It’s Good!
It’s Fair!
It’s Poor!

3. Give Us Your Comment To Further
Improve Our Website

Thanks for visiting!

Example 3:

Here’s a big example. Looking at the example, you can see that a field caption is added to field group by field group and legend tag through the <fieldset> tag. Input tag used to input information later. Lastly, the Submit and Reset button has been used so that you can submit or reset your input data. In this way, you can create many forms like Personal Information shown in the browser below using Field Tag and Legend tags.

Leave a Reply

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