Fieldsets and legends

Question

Alright, I know how the fieldset/legend works out in html. Say you have a form with some fields:

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

What should I use the legend for? It's being displayed as a title, but isn't a legend semantically an explanation of the contents? In my view, preferably you'd do something like this:

<form>
    <fieldset>
        <legend>* = required</legend>
        <label for="input1">input 1 *</label><input id="input1" name="input1" />
    </fieldset>
</form>

But that doesn't really work out with how fieldsets are rendered. Is this just a ambigious naming in html, or is it my misunderstanding of the english word 'legend'?

---

Edit: fixed some errors ;-)

Answer 1

Yes, the naming is ambiguous. Best to consider it as a caption for the fieldset

See http://www.w3.org/TR/html401/interact/forms.html#h-17.10 if you haven't already

The LEGEND element allows authors to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually.

Answer 2

I guess you meant to write

<form>
    <fieldset>
        <legend>legend</legend>
        <input name="input1" />
    </fieldset>
</form>

but you're right in part. The word legend has several meanings including

• An explanatory caption accompanying an illustration.
• An explanatory table or list of the symbols appearing on a map or chart.

So it can in fact mean both.

Answer 3

When you say that the legend "It's being displayed as a title".. clearly it depends on the CSS involved. When you don't specify CSS yourself, each browser uses its own built-in styles, which may or may not be the best thing ever.

I agree that a legend is different than a title... I don't necessarily think that the legend is the right place for something like "* = required" (that seems just a cautionary piece of information for the user, not really an explanation of the fieldset itself).

A legend, after all, can be defined as a caption, or brief description accompanying an illustration (usually; something other than an image in this case).

As far as how it gets displayed, again, CSS gives you power to make it appear (or not) as you see fit.

Answer 4

The <legend> element is the semantic equivalent of a "headline" or "title" for the group of form controls contained by the <fieldset>.

The FIELDSET element allows authors to group thematically related controls

which means fieldsets should group together several form controls -- not just a single pair of <input> and <legend>.

In fact <div>s, <p>s, or <li>s are quite suitable containers for <input> + <legend> pairs.