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.
精彩评论