CODEWITHSUNDEEP
htmlfieldset
Erik van Brakel
Erik van Brakel

Reputation: 23840

Fieldsets and legends

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 ;-)

Upvotes: 5

Views: 6726

Answers (5)

Gareth
Gareth

Reputation: 138110

Yes, the naming is ambiguous. It’s best to consider it as a caption for the fieldset.

See the HTML spec on FIELDSET and LEGEND elements 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.

Upvotes: 8

M&#225;r &#214;rlygsson
M&#225;r &#214;rlygsson

Reputation: 14606

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.

Upvotes: 1

Nicholas Piasecki
Nicholas Piasecki

Reputation: 25583

Think of the legend as a title of a groupbox. You use it to group similar form elements together. You could have all of the input fields for a shipping address in one fieldset with a legend of "Shipping Address" and the set of all input fields for a billing address in another fieldset with a legend of "Billing Address".

Here's an example:

Fieldsets in Skiviez Checkout http://piasecki.name/fieldset-legend-example.jpg

They can be tricky to style via CSS (because Internet Explorer displays the background of the fieldset incorrectly. Our IE stylesheet has some good examples; look in the "#content form fieldset" section.

Upvotes: 1

FOR
FOR

Reputation: 4368

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.

Upvotes: 1

Dan Maharry
Dan Maharry

Reputation: 1539

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.

Upvotes: 1

Related Questions