Using HTML Fieldset

Ajax is all about making websites more dynamic, richer and making them more usable. All the technologies that play part in Ajax are really important to achieve this goal. So, here in this article I explain the usage of fieldset and legend HTML elements, which add more semantic, structure and usability if used properly.

Fieldset is useful in making semantically related fields appear together visually. Grouping fields this way makes it easier for user to understand the semantic relationship of the fields and they are pretty stylish too, which makes it a very useful element.

Legend allows us to give a proper caption to the fieldset and makes it even easier for the user.

Let’s take a quick look at a simple example. Suppose that we are gathering personal and professional information of a user. One way of achieving this is to use markup elements (like, h1, h2, h3…) for these two sections. But using fieldset makes it very simple just by adding two fieldsets, like

<fieldset>
<!—for personal information -->
</fieldset>
<fieldset>
<!—for professional information -->
</fieldset>

This way, it adds semantic relationship among the fields declared inside a fieldset. To give the legend, just use

element inside the fieldset, like

<fieldset>
<legend>Personal Information</legend>
for personal information
</fieldset>
<fieldset>
<legend>Professional Information</legend>
for professional information
</fieldset>

I added some styles to the fieldset and legend fields. Here is the result page:

http://pavankeely.brinkster.net/fieldset_example.html

We can style these elements the same way we style other elements using CSS. Change the border color, font, background color and much more.

Fieldsets can also be nested producing nested semantic relationship to the HTML document and will help the user to understand the relationship.

IE Specific Info: By default IE adds a rounded cornered border. But once you change the border style, width or color using styles, the rounded corners disappear.