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.