Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?

Question

I\'ve come across a few examples recently that do things like:

  
Full Name:
  


        

Answer 1

Part of the reason for using <dl> for marking up the form is that it is much easier to do fancy CSS layout tricks with a <dl> than a <table>. The other part is that it better reflects the semantics of the form (a list of label/field pairs) than a table would.

Ok, table hate is part of it too.

Answer 2

Definition lists have semantic meaning. They are for listing terms (<dt>) and their associated definitions (<dd>). Therefore in this case a <dl> portrays the semantic meaning of the content more accurately than a table.

Answer 3

I've successfully used the technique outlined in this article several times.

I agree with sjstrutt that you should use form related tags like label and form in you forms, but the HTML outlined in his example, will often lack some code you can use as "hooks" for styling your form with CSS.

As a consequence of this I markup my forms like this:

<form name="LoginForm" action="thispage">
    <fieldset>
        <legend>Form header</legend>
        <ul>
            <li>
                <label for="UserName">Username: </label>
                <input id="UserName" name="UserName" type="text" />
            </li>
            <li>
                <label for="Password">Password: </label>
                <input id="Password" name="Password" type="text" />
            </li>
        </ul>
    </fieldset>
    <fieldset class="buttons">
        <input class="submit" type="submit" value="Login" />
    </fieldset>
</form>

This approach leaves me with a comprehensible set of tags, which contains enough hooks to style the forms in a lot of different ways.

Answer 4

Virtually all forms are tabular. Do you ever see a form that's not tabular? The guidelines I've read suggested using the table tag for tabular presentation and that's exactly what forms, calendars, and spreadsheets are for. And now they're using DD and DT instead of tables? What is the Web coming to?! :)

Answer 5

Definition lists are almost never used because semantically speaking they rarely show up on the internet.

In your case the correct code has been posted:

<form>
    <label for="fullname">Full Name:</label>
    <input type="text" name="fullname" id="fullname">
    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email">
</form>

You are creating a form with inputs and labels for said inputs, you are not setting forth a list of words and defining them.

If you are doing some kind of help section then definition lists would be appropriate, e.g.:

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascade Stylesheets</dd>
    <dt>PHP</dt>
    <dd>Hypertext Preprocessor</dd>
</dl>