开发者

Using unordered lists to create forms?

This is in continuation to my previous question which was closed cause of similarity to some previous SO questi开发者_开发百科ons. 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?


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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜