Trying to keep abreast of the new additions to HTML is enough to drive one to drink. Any addition has to be compelling enough to spend time to learn and implement it. Well, plan to sober up and meet fieldsets and kick the habit of tables for form layout.

What's the problem?

Forms are, well, formless; the different elements of a form lack any context between each. With a fieldset you can group related items on a form. For example, address information can be put into a fieldset and billing information can be put into another fieldset within the same form. Now your form has, well, a definite form. In addition, using fieldsets just made your form much more accessible. And if you ever want a government gig you better well do this.

To the end user the visual display of this can be achieved the same way using a bunch of tables and lots of HTML cruft. Feel free to keep using HTML 3.2 to design your forms and say goodbye to your liver. Or, have a moment of clarity and get with the new world order.

What's in a fieldset?

A fieldset contains legends and labels. A legend assigns a caption to the fieldset. A label, put simply, is the text next to a form element. For example, the label in the below example would be the text "first name".

first name

A very cool thing about labels is that they increase the target area for form items. Think about using your favorite OS and a dialog box appears with a checkbox. To check the box you can click on the text next to the checkbox instead of explicitly clicking on the checkbox itself. Sadly, Safari does not currently support this.

Show me the code

Now that I've shown you the basics you're ready to see the code.

<form id=appform>	
  <fieldset>
  <legend>Legend Title</legend>
	
  <label for=first_name>First Name:</label>
  <input type=text name=first_name id=first_name size=20 value= />
	
  <label for=last_name>Last Name:</label>
  <input type=text name=last_name id=last_name size=20 value= />
  
  </fieldset>
</form>

Without tables the layout is going to be an ugly nightmare

Horsepuckey! It's 2006 wake up and smell the CSS. Breath deep. It's good. Now let's add some style to make this fun.

First off, most forms have required and optional elements so I am going to create a class called required and one called optional. For my purposes I am going to keep this simple but feel free to season to taste.

.required {
padding: .2em;
}

.optional {
padding: .2em;
}

Next up I am going to stylize the rest of the elements in the fieldset.

legend {
font-weight: bold;
font-size: 1.2em;
background: #ededed;
}

fieldset {
display: block;
margin: 0px;
border: 0px;
clear: both;
}

input {
display: inline;
background: #fff;
margin-left: .2em;
}

.labelRadio .labelCheckbox {
float: left;
display: inline;
padding: 0em 1em 0em 1em;
text-align: left;
}

Lastly, I am going to create a custom class for one of the labels.

.bluelabel {
float: left;
display: inline;
font-size: 1em;
clear: both;
background: #2665cd;
padding: 2px 2px 3px 1px;
text-align: right;
color: #fff;
font-size: 1em;
width: 8.76em;
font-weight: bold;
}

Now armed with this little bit of CSS I am going to combine it with the HTML below.

<form id=appform>	
  <fieldset>
    <legend>Text Input</legend>
	
    <div class=required><!--for required fields-->
    <label for=first_name class=bluelabel>First Name:</label>
    <input type=text name=first_name id=first_name class=inputText size=20 value= />
    </div>
	
    <div class=required>
    <label for=last_name class=bluelabel>Last Name:</label>
    <input type=text name=last_name id=last_name class=inputText size=20 value= />
  </div>
</fieldset>

  <fieldset>
    <legend>Radio Buttons</legend>
	
    <div class=optional><!--for optional fields-->
    <label for=faxRadio class=labelRadio><input type=radio name=xxxx 
id=faxRadio class=inputRadio value=fax />Fax </label>
    <label for=emailRadio class=labelRadio><input type=radio name=xxxx 
id=emailRadio class=inputRadio value=email />E-mail </label>
    <label for=phoneRadio class=labelRadio><input type=radio name=xxxx 
id=phoneRadio class=inputRadio value=phone />Phone </label>
    </div>
	
  </fieldset>

  <fieldset>
    <legend>Checkboxes</legend>
	
    <div class=optional>
    <label for=faxCheckbox class=labelCheckbox><input type=checkbox 
name=xxxx id=faxCheckbox class=labelCheckbox value=fax />Fax </label>
    <label for=emailCheckbox class=labelCheckbox><input type=checkbox 
name=xxxx id=emailCheckbox class=labelCheckbox value=email />E-mail </label>
    <label for=phoneCheckbox class=labelCheckbox><input type=checkbox 
name=xxxx id=phoneCheckbox class=labelCheckbox value=phone />Phone </label>
	
    </div>
  </fieldset>
</form>

The results

As you can see there are no table elements involved in this form. But, if you look below you can see that everything lines up ok.

Much thanks to The Man in Blue for helping me get over my fear of forms without tables.