HIOX Free Tutorial - HTML Fieldset and Legend Tags, table caption, outline style, drawing boxes

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?

Explanation

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:

Details Name 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:

Details Name 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.

Feedback form

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