Wufoo’s login form
Semantics in forms are one of the things that needs to be talked about, in my opinion, since they are one of the most important parts of a web site. You create/edit user accounts, create/edit blog posts, submit a comment, gather information from your audience, and lots more through them. However, apart from
fieldset, we don’t really have a semantic way of marking up a pair of form elements.
There are different ways in marking up one’s form:
dl. Because using
dl, or definition list, to mark up a form is still unusual even though it’s not exactly a new idea, I will be talking and boring you, unfortunate people, about it here.
dl is one of the most overlooked element in HTML since, I assume, people mostly associate it with just definition lists, aka glossary. But it can be much, much more as was shown by Mike Robinson in his article about the
dl element in HTML5 Doctor. The HTML5 draft describes definition list as:
dlelement represents an association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (
dtelements) followed by one or more values (
The key to why
dl is the mark up that makes most sense (at least to me) is the name-value groups phrase. Form elements are all about pairing as you have the label which is the name and the corresponding value which is the
dl, your code is going to look something like this:
<form action=""> <dl> <dt><label for="input-value">Label Name</label></dt> <dd><input type="text" name="input-value" id="input-value" size="32" /></dd> </dl> </form>
Aside from your code being semantic, using definition lists for forms will enable you to have a correctly styled form element by default since both
dt (definition term aka term) and
dd (definition aka value) are block elements.
dl also lets you mark checkboxes up with more sense like so:
<dt>Select one or more option:</dt> <dd> <label> <input type="checkbox" name="value-1" id="value-1" /> </label> </dd> <dd> <label> <input type="checkbox" name="value-2" id="value-2" /> </label> </dd> <dd> <label> <input type="checkbox" name="value-3" id="value-3" /> </label> </dd>
I have to admit that I’m stumped checkboxes and radio boxes. There are times when it makes sense to put the option heading in a
legend, but you can’t always put them in a separate
fieldset! Using a heading element makes even less sense. Most of the time, I just use
label even though it’s not really linked to anything. Well,
p works, too.
Like everything else, using
dl isn’t really foolproof:
ddare separate elements which makes it harder for you to clear them in case you’ve decided to float them and have multiple values. This scenario is easier for
pbecause they act as a wrapper to the label-input pair. You can fix this by clearing your
- You’ll encounter a version of the above mentioned problem when you have an empty value in a pair. You can either put a space (
;) or min-height. I’m thinking that min-height is the better solution between the two, though.
- An IE 6 problem: when you add a block element within
dland its child elements, IE6 escapes the definition list so that the block element is outside it. There’s still a workaround like, instead of
p, you can use
spaninstead, which sort of defeats the purpose of what we’re trying to do. Ken, a co-worker of mine assured me that that problem doesn’t exist in IE 7, which is a sigh of relief.
Personally, I think the pros outweighs the various CSS issues you might encounter in the process. Nothing makes you feel better than being able to solve a CSS problem, which is probably why I miss IE 6 sometimes (isn’t that sad?). :(
How do you mark up your form? Do you think you’ll try and switch to
dl one of these days?