Question

I’ve just come across these in MVC, and would like to use them instead of tables sometimes, as tables and DIV’s just don’t mix well!

Never seen these before, and was wondering if there is any documentation about these new table-substitute TAGs? I’ve also heard recommendations to use these as opposed to tables and would therefore like to familiarize myself with them properly (as opposed guessing how they work as I have been recently).

thanks

ps: these things did not exist in HTML when i studied HTML, and i recall i studied HTML 4.0 ages ago, when it came out…

Answer 1

A fairly standard way of using fieldsets to contain form elements is just to use it as a basic building block, like a div. Think of it as a containing div that has semantic value and that you can use the legend element in. Fairly basic XHTML for this:

<fieldset>
  <div>
    <label for="x">Thing</label>
    <input type="text" id="x" name="x" />
  </div>
  <div>
    <label for="y">Thing</label>
    <input type="text" id="y" name="y" />
  </div>
</fieldset>

(The div is pretty necessary for IE6 and handy nonetheless.) Then in CSS you format the fieldset and such accordingly. For instance, you’ll usually want to suppress the normal border a fieldset is given.

fieldset { border: 0; }
fieldset.display { border: 1px solid #cccccc; }
/* You can always invert this. Up to you. */

There’s a lot of other things you’ll need to do, but that’ll get you started–it’s pretty much just treating it as a semantic block element, like a div but with meaning, from here. Group your elements into logical groups, and if you ever need to differentiate it from the rest of the form, all you have to do is change the fieldset’s class and add a legend.