Saturday, January 11, 2014

Html>> HTML Fieldset and Legend Tags - (PART_47)

Topic: How to draw outline or boxes around the elements in the html page using fieldset? How Legend tag is used as a caption for html page elements? 

HTML Fieldset and Legend Tag:
Fieldset is an element used for drawing an outline or boxes around the field elements in the html page. Legend tag is used as a caption for fieldset element.

Example Code:

<fieldset>
<legend>Details</legend>
Name <input type="text" size="10" />
Age <input type="text" size="3" />
</fieldset>

Result:


DetailsName  Age 

This example shows drawing an outline box with "Details" as caption using legend tag. Size of the outline box can be adjusted by resizing the width.

Example Code:

<fieldset style="width:220" align="center">
<legend>Details</legend>
Name <input type="text" size="10" />
Age <input type="text" size="3" />
</fieldset>

Result:


DetailsName  Age 

Mostly, these tags are used in lengthy forms to give the webpage a good look. Here is an example where these tags are used in feedback form.

Note: Fieldset encloses content between <td> and </td>, so it doesnt work for forms defined by multiple rows and columns.