views:

45

answers:

2

This is in continuation to my previous question which was closed cause of similarity to some previous SO questions. Although the answers in all related questions made me to think this:

Should we use unordered lists to create forms? And although I got mixed comments.

A particular blog http://green-beast.com/blog/?p=259 said that using unordered lists for forms is not correct. My question for developers is to comment on this statement?

+1  A: 

HTML offers authors several mechanisms for specifying lists of information. All lists must contain one or more list elements. Lists may contain: unordered information, ordered information and definitions. (from http://www.w3.org/TR/html4/struct/lists.html#edef-UL)

I think lists are the most important elements in HTML: semantically, there are so many objects that are pure lists. It is also a good practice to use ul or dl to group input fields and labels in form too.

Someone will markup form using paragraphs:

<form action="" method="post">
    <fieldset>
        <p>
            <label>
                Full Name: 
                <input type="text" name="name" />
            </label>
        </p>
        <p>
            <label>
                Password: 
                <input type="password" name="password" />
            </label>
        </p>
    </fieldset>
    <fieldset>
        <p>
            <label>
                Occupation: 
                <input type="text" name="occupation" />
            </label>
        </p>
        <p>
            <label>
                Location: 
                <input type="text" name="location" />
            </label>
        </p>
    </fieldset>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

And someone will markup it using lists (and this looks very organic in my opinion):

<form action="" method="post">
    <fieldset>
        <dl>
            <dt><label for="name">Full Name:</label></dt>
            <dd><input id="name" type="text" name="name" /></dd>
            <!-- <dd class="error">Some errors/validation warnings</dd> -->

            <dt><label for="password">Password:</label></dt>
            <dd><input id="password" type="password" name="password" /></dd>
            <!-- <dd class="note">Some notes about the field above</dd> -->
        </dl>
    </fieldset>
    <fieldset>
        <dl>
            <dt><label for="occupation">Occupation:</label></dt>
            <dd><input id="occupation" type="text" name="occupation" /></dd>

            <dt><label for="location">Location:</label></dt>
            <dd><input id="location" type="text" name="location" /></dd>
        </dl>
    </fieldset>
    <p>
        <input type="submit" value="Submit" />
    </p>
</form>

Forms are lists (lists of fields, grouped data), because they have uniform and repetitive structure:

INPUT_1
INPUT_2
...
INPUT_N
floatless
I tend to use an ordered list since most forms have a tab order. I know you don't get the tab order from the list, but semantically it makes sense.
Mitch R.
A: 

You can stick your form in paragraphs, tables, lists, definition lists, or a complicated series of spans and divs, but in the end the only things that matter are whether your form works correctly and people can use it.

Spend your time on tabindex and usability rather than worrying about the "semantically correct way to write HTML" as defined by a W3C working group or someone's blog.

banzaimonkey