There are a couple more XHTML elements that I want to introduce you to in this lesson. These elements will help you organize and label the different parts of your form, similar to the way DIV and H3 do for content on your regular web pages. These elements are FIELDSET and LEGEND.
FIELDSET groups any number of your form elements together, similar to a DIV.
LEGEND goes with a FIELDSET and provides a heading-like label for the grouping.
For example, in my client's page, if we look at the notes we can see two distinct groupings: "Personal Information" and "Games"...
Now look at how I apply FIELDSET and LEGEND to the first part of my form:
Browsers, by default, actually render FIELDSET and LEGEND out pretty nicely:
One thing this does not give me is separate rows for First Name, Last Name, E-mail. That's easily resolved by adding DIVS:
And here we go:
You now have all the basic form-related elements that you need to make a great form for your client. You also have several additional elements, such at LABEL, FIELDSET, and LEGENT that not only add inherent usability and organization to your form, they also give you great "hooks" for your CSS. Once you've written a few drafts of your client's form, try adjusting the look and feel of the form using CSS. Your form elements should integrate well into the website, taking on the site's look and feel.
return to top