HTML fieldset with two legends - top and bottom

Question

I'm currently using a fieldset and legend to draw a box around some inputs i have in a form that looks something like this:

---------Caption---------
|                       |
|       inputs          |
|                       |
|                       |
-------------------------

I'm curious if there is a way to put another caption (legend) on the bottom of the box like so:

---------Caption1--------
|                       |
|       inputs          |
|                       |
|                       |
--------Caption2---------

Simply using another legend tag at the bottom of the fieldset does not work....

Answer 1

fieldset and legend have a 1:1 relationship by definition. One fieldset must not have more than one legendelement inside. You may use any other Element and use CSS to style it so it looks like a legend though.

Answer 2

You can have only one legend element per fieldset, by HTML syntax, and if you try to use two legend elements, only the first one is displayed as a legend. The second one is treated as normal content.

Using CSS to style a bottom legend is not as simple as it may sound, partly because IE applies padding for fieldset differently from other browsers (and HTML5 CR). But the following seems to give fairly consistent results on CSS-enabled browsers:

<style>
fieldset { position: relative; padding: 0.35em 0.625em 0.75em; }
.legend2 { position: absolute; bottom: -1.4ex; left: 10px; background: white  }
caption, .legend2 { padding: 0 2px }
</style>

<fieldset><legend>Caption <span class=legend2>Caption2</span></legend>
  Put fields here.
</fieldset>

Answer 3

This is not on the top and bottom, it is on top right and top left. It seems not crossbrowser compatible.

I use this code for my webpage:

<style>
fieldset { margin:0; }
legend:after { position:absolute;content: attr(secondlegend);left:20px;background: #fff; }
</style>

<fieldset><legend secondlegend="Console" align="right"><button>clear</button></legend>
This is the content<br>of this fieldset
</fieldset>

But i use it as a console with the clear-button
So in the second legend-attribute i write the real Legend