Forms Without Tables

June 26th, 2007

A form based on definition listsEver wondered how to place a form on a site without tables? If you want your page to be fully semantic XHTML and CSS so that it looks good to screen readers AND search engine spiders, you mustn’t use tables.

Don’t despair, there is an answer. Bring on the definition list <dl>, definition description <dd> and definition term<dt> tags! Definition lists are a special case of <ul>, <ol> and <li> and are usually used to list definitions! Go figure!

<dl>
A definition list is the container element for DT and DD elements. The DL element should be used when you want incorporate a definition of a term in your document, it is often used in glossaries to define many terms, it is also used in “normal” documents when the author wishes to explain a term in a more detail (Like this definition).
<dt>
The term currently being defined in the definition list. This element contains inline data.
<dd>
The definition description element contains data that describes a definition term. This data may be either inline, or it may be block level.

But, definition lists also make a great foundation for web forms, so instead of


A common non-accessible table-based form<form>
<table>
<tr>
<td><input type=”text” id=”name” name=”name” class=”input” /></td>
</tr>
<tr>
<td><input type=”text” id=”email” name=”email” class=”input” /></td>
</tr>
<tr>
<td><input type=”submit” id=”submit” value=”submit” /></td>
</tr>
</table>
</form>

you can get the same effect with …


The same form based on definition lists<form>
<dl>
<dt><input type=”text” id=”name” name=”name” class=”input” /></dt>
<dt><input type=”text” id=”email” name=”email” class=”input” /></dt>
<dt><input type=”submit” id=”submit” value=”submit” /></dt>
</dl>
</form>

which is smaller too. Indeed, you can improve matters further by using the <dd> tag to add titles to the table …

A form based on definition lists with labels<form>
<dl>
<dt>Your name</dt>
<dd><input type=”text” id=”name” name=”name” class=”input” /></dd>
<dt>Your email address</dt>
<dd><input type=”text” id=”email” name=”email” class=”input” /></dd>
<dd><input type=”submit” id=”submit” value=”submit” /></dd>
</dl>
<form>

And add a <label> tag for improved accessibility (screen readers will now know what the column headings are) …

<form>
<dl>
<dt><label for “name”>Your name</label></dt>
<dd><input type=”text” id=”name” name=”name” class=”input” /></dd>
<dt><label for “email”>Your email address</label></dt>
<dd><input type=”text” id=”email” name=”email” class=”input” /></dd>
<dd><input type=”submit” id=”submit” value=”submit” /></dd>
</dl>
<form>

Browser default layout gives an indented style (just like a definition list) but because the <dl>, <dd>, <dt> and <label> tags can be given style information like a <div> tag via CSS, the web designer can indulge in infite layout options while not affecting the accessibility and usability of the page.

Other tags — from <p> and <br /> to accessibility tags such as ABBR, LANG and ACRONYM — can also be used to format and modify the contents.



Leave a Reply