Bringing order to the HTML form
Last week I asked the question on Twitter, “What HTML element do you use for each line of a form? P, DIV, or something else?”
Normally this is the kind of conversation I like to keep well out of. Experience tells me that some people get a bit too passionate for their own health when talking about markup and semantics.
I don’t see myself as a member of the markup police and really, I don’t think there is a “wrong” answer to the question (… well, there is, but I’ll give people the benefit of the doubt).
Historically, I’ve always used DIVs to wrap each LABEL and INPUT pairing. Then at some point about a year ago I started using Ps. I don’t know why I changed, I think it’s because I saw lots of other people using Ps and I just followed suit.
Can I have a P please, Bob?
The more I think about it, the less sense using a P makes. Firstly, from a semantic point of view you are basically describing each label and form element as a paragraph. Which it’s not.
Secondly, from a practical point of view, if you need to slip in some actual paragraphs of text somewhere in the middle of a form, you’ll probably need to style them differently from the form rows which means adding additional classes to tags and generally having scrappier CSS.
Do I need any markup?
At least two people responded to me on Twitter suggesting that I didn’t need any tags at all to wrap each LABEL and INPUT pairing and that I was adding superfluous markup. I don’t agree.
Again, semantically I believe each pairing needs to be grouped to adequately describe that a particular LABEL belongs with a particular form element, rather than just have a bundle of orphan elements living together in some kind of HTML workhouse.
And from a practical perspective, more markup is good because it provides greater flexibility for styling the form and highlighting errors and validation messages.
Back to the humble DIV?
A DIV defines, and I quote, “a division or section of an HTML document”. Well, I suppose that’s not exactly wrong in our case. I certainly think a DIV is a better candidate than a P.
But the problem with a DIV is that it doesn’t really mean anything other than “enclosed within here is some stuff”. I think we can be more descriptive than that.
Bringing order to the form
Today, my preferred technique for marking up forms is with an ordered list. Here’s an example:
<form> <ol> <li> <label for="name">Name</label> <input type="text" name="name" /> </li> <li> <label for ="email">Email</label> <input type="text" name="email" /> </li> </ol> </form>
Now, I expect the people who prefer their markup minimal are going to take some convincing. But to me, this makes absolute perfect sense!
There is more than enough markup there to allow us to style the form to our hearts content. And semantically we are saying, this form is a list of fields. That’s pretty descriptive, and I really like the idea of a screen reader saying “a form with a list of 5 items”.
For complex forms with multiple FIELDSETs the example above could be extended so that each form contained a list of FIELDSETs, and each FIELDSET contained a nested list of form fields.
Many ways to skin a cat
As I said at the start of this article, I don’t necessarily think there is a “wrong” way to mark up forms. If you’re happy with your DIVs and your Ps, then that’s good enough for me.
But personally, I genuinely feel I’ve brought some order to my form building and am much happier doing so as a result.
5 responses
Matt Hill responded on with…
I believe I was one of the people who disagreed with you on Twitter :-)
I’ve never used OL and LI to order my forms as I’ve always felt it’s redundant. At the end of the day, a form isn’t a list, it’s a form, and my long-held view is that using a list where it’s not really needed is looking for a solution for a problem that doesn’t exist.
But I’ve been thinking about this a bit more and can understand why some would choose to use it. I can also see that it might be useful in certain situations within parts of a form, though not necessarily for each distinct form line. For example, it could be useful to wrap a group of related radio buttons or checkboxes in a list. In addition, I can see that having an extra wrapping element is useful if you want to add fancy inline error checking using jQuery or similar.
That said , I still think that for simple forms, the simplest HTML is the most appropriate – assuming you’re also marking that up correctly, with the correct LABEL for each INPUT and the associated FOR attributes (which a lot of people seem to forget).
Clearly, there’s no right or wrong and we all have our own way of doing things. As long as the form is usable and accessible, that’s the most important thing.
kyr responded on with…
i personally dont see the reason for ordered list in this case. why not unordered?
Oskar responded on with…
Just stumbled across your post. It’s an interesting question and one that I guess one doesn’t really think about very much. It’s made me go and look back at some sites and see what I’ve been using. Looks like I vary from site to site! Mainly it looks like a DIV or a LI. I’ll see what happens next time now I’ve read this….!
Wil responded on with…
Would a definition list be a more suitable solution?
Simon responded on with…
Hi I just came across this post whilst looking for something on faking display:inline-block in IE6.. anyways, here’s my 2p.
Wherever possible, I try to avoid writing mark-up (because it’s tedious and because documents benefit from having less of it), so I’m a big fan of using the LABELs themselves as the containers, thus: Your text here .. and then forcing the lining up using CSS. label { display:block; line-height:25px; /* make this a bit bigger than your input controls */ } label * { vertical-align:middle; } … tho’ I’ll admit this is very simplistic, from memory, and I’ve not tested it as-is. It should work as a template. You’ll have to modify it a bit for TEXTAREAs, SELECTs etc. The association between label and control can be implicit yet still function AND convey appropriate meaning.
I’ll sometimes use definition list notation, for those occasions where I need something more complex than the above, because of design requirements. This suits because DLs are for pairs of information - a term and a definition, a label and a field, a title and a description etc.
Increasingly I”m opposed to using DIVs. Their very flexibility is their downfall - you can use them everywhere so you tend to, and end up with layer upon layer of nesting that doesn’t reflect the structure of the information on the page.
Simon PS Aaron, I really like the highlighting for the in-focus fields in the forms on your site.
Comments are closed
Responses for this article have now been disabled. You can still email me directly through the contact form.