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.

Syntax:

<fieldset>…………</fieldset>

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.

Legend:

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

Syntax:

<legend>…………</legend>

<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).

Syntix:

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

Example-1:

Html code:

<!doctype html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<form>
<h2>Example of filedset tag in html5.</h2>
<fieldset>
<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>
</fieldset>
</form>
</body>
</html>

Display in Browser:



Example of filedset tag in html5.

Employee Details.

Employee ID:

Employee Name:

Employee Address:

Employee Post:


Example-2:

Html code:

<!doctype html>
<html>
<body>
<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>
</fieldset>
</body>
</html>

Display in Browser:



Address Details

Favorite Address:

Least Favorite Address:

Current Address:

Permanent Address:


Example-3:

Html code:

<html>
<body>
<form name="feedback" method="post"  
action="mailto:ganeshbadc@gmail.com">
<fieldset>
<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>Brunei</option>
<option>Cambodia</option>
<option>Indonesia</option>
<option>Malaysia</option>
<option selected="selected">Philippines</option>
<option>Singapore</option>
<option>Taiwan</option>
<option>Thailand</option>
<option>India</option> 
<option>Bangladesh</option>
</select>
</fieldset>
<fieldset>
<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!
</fieldset>
<fieldset>
<legend><strong>3. Give Us Your Comment To Further 
Improve Our Website</strong></legend>
<textarea name="comment" rows="3" cols="50"></textarea>
</fieldset>
Thanks for visiting!<br />
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Display in Browser:

 

1. Personal Information

Name:
Date of Birth:
Interest: Surfing the web
Reading books
Email:
Country:

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 *