I should’ve bet money (on using paragraphs in forms)

For years and years, I have coded HTML forms with paragraphs. I would tell people that an input field and its label, plus any associated data (help text, error messaging, whatever), should be wrapped by a paragraph. To me, the contents are semantically and syntactically related; and much like any other written document, each form label-field pair is a distinct topic requiring separation from others. I think there’s also precedence in the print world for this, as well as examples from early HTML work, but let’s just leave my argument at that.

I believed in paragraphs in forms so much that I even made this the rule in PayPal’s coding standards. And because of this, I have had a very long-standing argument with colleagues and friends, like Steve Ganz. (Mark Trammell, Shimone Samuel, and Jeff Harrell come to mind, too.)

I’ve been working on a writing assignment with Christopher Schmitt (a chapter on HTML5 forms for the upcoming HTML5 Cookbook) and he suggested that I include an explanation as to why I’m using paragraphs in my form examples, because, as Christopher said, “You know someone’s going to be coming out for us on that one.”

So, direct from the HTML5 spec, here’s my new justification for using paragraphs in forms [Emphasis mine.]:

Any form starts with a form element, inside which are placed the controls. Most controls are represented by the input element, which by default provides a one-line text field. To label a control, the label element is used; the label text and the control itself go inside the label element. Each part of a form is considered a paragraph, and is typically separated from other parts using p elements.

There you go. I was right all along. I should’ve bet money on it.


  1. Nice! I always liked wrapping inputs and label text in a label element to provide that separation and also to increase the size of the click target.

Leave a comment

Some HTML is allowed. Comments with more than two hyperlinks will be held for moderation.