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.


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”>


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>

Display in Browser:

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>

Display in Browser:

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!


Leave a Reply

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