Fieldset, legend and label

I wrote this page somewhere in 2000 and did not update it since. Browser compatibility will likely have changed.

See also the W3C definitions of <fieldset> and <legend> and <label>.

<fieldset> and <legend>

<fieldset>: A block level element containing content. By default a border is placed around this block.

<legend>: The legend of the fieldset. By default this is shown in the upper left corner, on top of the border.
The <legend> tag is supposed to be the first one inside the <fieldset>. If it isn't, Explorer gets horribly confused.

Although the specs say it can only be used in conjunction with forms, the example below (without any forms) works fine:

Test without forms
A DIV inside a fieldset, not related to forms

A reader reported that AOL browsers on Mac can have terrible problems with <fieldset>s, usually in conjunction with tables. Since I don't have AOL browsers available I cannot test it.

Styles

As said before, the <fieldset> has a border by default. In Explorer the default border-style is groove, in the other browsers it's solid. If you try to set the border-style in a style sheet Explorer 4 on Mac and iCab get confused.

However, setting border styles does help the fieldset become visible in Opera and Konqueror, so it might be a good idea to include it nonetheless. Opera and Konqueror show the <legend> as content of the fieldset, though, not on the border as the other browsers do.

<label>

The <label> tag is meant "to attach information to controls." This carefully vague specification leaves it to the browser vendors to actually do something with it.

The only vendor to actually do something is Microsoft. In Explorer 4 and up on Windows and 5 and up on Mac, a labeled text is clickable. If you click it the focus is put on the form field the label is attached to.

Try it here:

Please note that the <label> is attached to an INPUT field having an id. Nonetheless the name attribute is also necessary for submitting the form.

<input name="name" id="name">
<label for="name">name</label>