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 ListAs 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 ListHave 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!