Forms — The <fieldset> and <legend> Tags

<fieldset>...</fieldset>

<legend>...<legend>

Attributes for <legend>:

  align="left|right"      [deprecated]

The <fieldset> and <legend> tags were introduced in HTML 4.0 as usability aids. They let you group the gadgets in your form into related groupings, and to draw a border with a caption around each grouping.

HTML 4.0 came into being after Netscape 4 was released, and Netscape 4 does not support <fieldset> and <legend>. You can expect IE 4+ and Netscape 6+ to support these.

Here's an example:

<form>
  <fieldset>
    <legend align="right"> Personal Information </legend>
    <p>
      Name:
      <input type="text" name="thename">
    </p><p>
      Age:
      <input type="text" name="theage" size="3">
    </p>
  </fieldset>
  <br />
  <fieldset>
    <legend> Order Information </legend>
    <p>
      Item you want to order:
      <select name="item">
        <option> Cookbook </option>
        <option> HTML Book </option>
        <option> Mystery </option>
      </select>
    </p><p>
      Quantity:
      <input type="text" name="quantity" size="3">
    </p>
  </fieldset>
</form>

Here's how this appears:

Netscape 4
Netscape 6
IE 5

We could pretty this up considerably with CSS. If we define the following classes:

  .fieldset { border: 6px blue outset;
              padding: 15px; }
  .legend { border: 3px red double;
            color: red;
            padding: 5px; }

If we change the second <legend> to also specify align="right" and if we add class="fieldset" to each of the <fieldset> tags and class="legend" to each of the <legend> tags, we'll get this result:

Here's how this appears:

Netscape 4	No change
Netscape 6
IE 5