In this article I will try to both explain the basics of DL - one of the most misunderstood elements in HTML, and also how we can use it to add semantic sugar to our forms.

What is DL?

DL is one of the element that everyone misses. We all know the OL and UL list elements, but there is a third, much more interesting type of lists - the Definition List.

Not like normal list items, a DL has 2 child items - DT and DD, which come paired. The first - DT - stands for Definition Term, and the Second DD - Definition Description.

What's interesting about these is that each term can have multiple description, and on the other side, each description can have multiple Terms linked to it (though i can hardly think of a use case for it).

So - how does this work? Lets look at this list:

<dl>	
	<dt>Name</dt>
		<dd>Arieh</dd>
	<dt>Family Name</dt>
		<dd>Glazer</dd>

	<dt>Phone Numbers</dt>
		<dd>012-3456789</dd>
		<dd>013-8797361</dd>
</dl>

In case you don't get it, what it mean that the term Name has one description - Arieh, the F-name - Glazer, and phone # has 2 phone numbers associated with it.

If you are familiar with switch statements from other programing languages, this list works the same way as a case without a break.

To summarize this - the DL gives us an amazing way to describe connections between adjacent elements. For those of you who dig semantics, this is a must element. I have a friend who eventually found himself thinking of his entire site as a deeply nested DL, where each section is the DD of its Title. There are some problems with DL, which I'll cover in the end, but it isn't the point of the post.

Building forms with DLs

So how does this have anything to do with forms? Well, if you think of it, a form is nothing but a long list of definitions - the labels - and their description - the input fields:

<dl>
	<dt><label for="name">Name:</label></dt>
	<dd><input type="text" id="name" name="name" /></dd>

	
	<dt><label for="email">Email</label></dt>
	<dd><input type="text" id="email" name="email" /></dd>

</dl>

But - you might say - this is a lot of markup when really, you get almost the same meaning as with simply using the labels. And will probably be right. You may notice that the comment form here on this page really does only use normal label-input pairs.

The place where DL truly shines for form is when we introduce checkboxes and radios -

<dt>Gender</dt>
	<dd><label for="gender-male"><input type="radio" id="gender-male" name="gender" value="male" />Male</label></dd>

	<dd><label for="gender-female"><input type="radio" id="gender-female" name="gender" value="female" /></label></dd>

<dt>Hobbies</dt>
	<dd><label for="computers"><input type="checkbox" id="computers" name="computers" /> Computers</label></dd>

	<dd><label for="sports"><input type="checkbox" id="sports" name="sports" /></label> Sports</dd>

	<dd><label for="tv"><input type="checkbox" id="tv" name="tv" /></label> Tv</dd>

Notice how much meaning we added - there is a clear connection between these inputs.

Just to summarize - a complete form example:

<form action="post/comment">
	<fieldst>
		<legend><span>My Form</span></legend>
		<dl>

			<dt><label for="name">Name</label></dt>
			<dd><input type="text" id="name" name="name" /></dd>

			
			<dt><label for="email">Email</label></dt>
			<dd><input type="text" id="email" name="email" /></dd>

			
			<dt>Gender</dt>
				<dd><label for="gender-male"><input type="radio" id="gender-male" name="gender" value="male" />Male</label></dd>

				<dd><label for="gender-female"><input type="radio" id="gender-female" name="gender" value="female" /></label></dd>

			<dt>Hobbies</dt>
				<dd><label for="computers"><input type="checkbox" id="computers" name="computers" /> Computers</label></dd>

				<dd><label for="sports"><input type="checkbox" id="sports" name="sports" /></label> Sports</dd>

				<dd><label for="tv"><input type="checkbox" id="tv" name="tv" /></label> Tv</dd>

		</dl>
		<input type="submit" value="submit" />
	</fieldst>
</form>

Now, you might notice that i haven't added any "live" examples. This is because I belive this is simply irrelevant, in the way that this article is about semantic use of DL. Making it appear like a nice and ordered form can be easily achieved using floating, clearing and text aligning. something like this:

dt,dd{float:left;}
dt{width:200px; text-align:right; padding-right:10px; clear:both;}

Drawbacks of using DLs

There is one great drawback here - and that is that in a way - DL isn't really XML. XML has very specific ways of describing relationships between elements, and DL's type of relationships isn't really in them. For most stying this won't be noticed, but when you might try to create a selector to all dd's that share the same DT, you'll find yourself in a pickle.

This is why I try to reduce my use of them only to places where i will actually have more that one DD per DT. For other cases, I usually choose to use the DFN element, which is very much the same, but inline, and XMLish. for example:

<li><dnf>Name</dnf>Arieh</li>

This doesn't come to cancel the entire subject of this article - which is - Use DLs for forms! simply to point out some other alternatives.

This is it for now. Will probably add some links soon.