Form Mark-Up: Are Lists Appropriate?
Dustin Brewer posted an article about form mark-up and styling. The day before, Antonio Lupetti of Woork posted an article covering the same topic, but with a different approach. Both examples use lists, Dustin going for Definition Lists and Antonio using Unordered Lists. Forms can be styled without either, but if you want something fancy you need to add in more elements. Reader comments on Antonio's article objected against the use of lists as they felt they weren't semantic. Or are they?
If you're making a form and want some extravagant styling then you have to add more elements. Unless you are prone to divitus (over use of div elements), picking the most semantically appropriate element is a tricky task. You could use paragraph, ordered list, unordered list or definition list tags (Example Page) to enclose your labels and fields, adding more styling flexibility. They all validate but are any of them semantically correct?
I disagree with using paragraph tags, however lists do make sense to me. Particularly definition and ordered lists. Unordered lists don't put emphasis on the order, which is important in form design to minimize entry error. This is why ordered lists make sense, since you have a carefully selected order of fields to be filled in. Yes, you can jump around a form but users will generally go from one field to the next in the order they have been given, hence why that order should be set with great care. Definition lists sound right because a user is defining a value that corresponds to the attached label.
Ordered List
As I said before, the order of a form's fields can be very particular to make data entry more efficient and error-free. When you tab through the fields you will focus in the order that they are displayed in the mark-up, unless set differently using the "tabindex" attribute.
<form action="#" method="post">
<fieldset>
<legend>Your Details</legend>
<ol>
<li>
<label for="ol_name">Name:</label>
<input type="text" id="ol_name" name="ol_name" />
</li>
<li>
<label for="ol_age">Age:</label>
<input type="text" id="ol_age" name="ol_age" />
</li>
<li>
<label for="ol_location">Location:</label>
<input type="text" id="ol_location" name="ol_location" />
</li>
</ol>
</fieldset>
</form>
This sets up the form for Name first, Age second and Location third. I didn't feel that asking for the location or age first would have been an appropriate order when trying to get to know the user.
Definition List
Have a look at this example of a definition list:
<dl>
<dt>Name: </dt>
<dd>Mike Robinson</dd>
<dt>Age: </dt>
<dd>20</dd>
<dt>Location: </dt>
<dd>United Kingdom</dd>
</dl>
I've listed 3 specific details about myself, defining my name as Mike Robinson, my age as 20 and my location as United Kingdom. If we wanted people to set their own details, stored in a database for example, we would build a form. The form would allow them to define a value to the corresponding label, which we could then output in the definition list above.
<form action="#" method="post">
<fieldset>
<legend>Your details</legend>
<dl>
<dt><label for="dl_name">Name: </label></dt>
<dd><input type="text" name="dl_name" id="dl_name" /></dd>
<dt><label for="dl_age">Age: </label></dt>
<dd><input type="text" name="dl_age" id="dl_age" /></dd>
<dt><label for="dl_location">Location: </label></dt>
<dd><input type="text" name="dl_location" id="dl_location" /></dd>
</dl>
<fieldset>
</form>
I've given both of the "most appropriate" choices a lot of thought, and I feel that "Ordered Lists" do work best. The mark-up groups each field with it's label rather than continuing to split the two. Styles can be applied to the label and input giving you a way of setting styles to each element and to that group, which can be taken further to the fieldset and <ol> elements.
What do you think? Do you agree with using ordered lists or should there be a new, form specific tag? Let me know in the comments!
5 Comments
MyRule
nice article! I have to admit that I never use definition lists, so I agree with you that an ordered list is the best choice.
Mark Aplet
Mike, I found your site from noupe today. I started to write a response to your post this evening, however after writing what felt like a book, I decided I might be better off creating an entire post about this topic. I used your code as an example however I hope you don't think I am railing against you as I am certianly not. To be honest I am not sure where you stand in this instance. You seam to be on the fence the more I read your post.
My short response is, NO, this is not semantic at all for reasons I detailed in my post. I hope I got them all across. basically your using a list to serve the same purpose a table once served. Layout. I know one can argue for and against this topic for days, but one can also argue that every sentence on a page could be in a list. We could then run them all together to make a paragraph. It's absurd I know, but the argument could be made.
My take on it. Use HTML as it were intended to be used and try to make the web a better place, not a bullet'ed list.
Mike
Mark, that is an excellent response! I've left a comment on your article, it's exactly the kind of discussion I hoped to generate :)
Mark Aplet
I believe healthy debate is how we grow. Necessity is of course the mother of all invention. So these types of articles are a great tool for figuring out what works and what doesn't. I guess my final opinion would be that a div, though not necessarily "semantic" historically, is a better choice than a list. Personally I will only continue to support standards based browsers as we move forward. Old deprecated browsers that do not understand the div tag will be nothing more than a distant memory. In closing, are we trying to support aging browsers with semantic code? or are we moving forward and supporting standards browsers? I guess that's a whole other topic ;)
Stomme poes
I've never used a list for a form, mostly because I've battled them long enough to generally get what I want, style-wise, from the form elements themselves (sometimes with a meaningless wrapper like a div to make the label-input pair a unit... I've been using the label itself for this lately).
However, the definition list... is perfect for representing a filled-in/submitted form! I mean, after someone submits, and their info is shown back at them, a dt in the results reflects what the label was, while the dd reflects what the input was. I've been using them for results from the beginning (the reason they're not in the forms themselves is because label and input with the "for" attribute already have a relationship and the dt/dd's relationship is then simply redundant and unnecessary).
(found this page via Lupetti's page, which was interesting)