Fieldset and Legend

When you have forms that include more than just two or three fields there is often a relationship between the fields in the form where it makes sense to group some of the fields together to separate them from the rest of the form. While we could do this using a div or span and a selection of stylesheet commands the better way of handling this field grouping is using the fieldset and legend tags that are provided to perform this grouping function for us.

<fieldset><legend>Size</legend>
<input type="radio" id="r1" name="size" value="s" />
<label for="r1">Small</label>
<input type="radio" id="r2" name="size" value="m" />
<label for="r2">Medium</label>
<input type="radio" id="r3" name="size" value="l" />
<label for="r3">Large</label>
</fieldset>

Here's what adding a fieldset and legend around a group of radio buttons looks like in your web browser.

There are no special attributes available for the fieldset and legend tags but they do support the standard ones such as id, class, and title.

One thing to note with regard to fieldset and legend is that some browsers (particularly older versions of Internet Explorer) differ in where they consider the top of the fieldset to be when it comes to applying a background or similar. The legend is usually positioned by default so that it is centre aligned vertically on the top border of the fieldset and while most browsers will treat the background of the fieldset as only extending to the border and so only apply to the lower half of the legend, others will apply the background so that it extends to the top of the legend and hence overflows out of the top border of the fieldset. If this is of concern then you may need to reposition the legend in order to rectify the problem.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate