Why does the W3C advise wrapping input elements in <p> tags?

Question

I've seen a lot of examples on the web where forms are laid out like so:

<form>
    <p><input></p>
</form>

To my surprise, this is also described in the specification:

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. Putting this together, here is how one might ask for the customer's name:

Though this section is non-normative, it still seems to me that this is bad practice and not semantic. I suppose that the purpose is to put inputs on their own line, but shouldn't the display of these elements be controlled using CSS?

Is there a reason why the W3C advises forms be laid out this way? Am I missing something?

Answer 1

If you are writing a form in a meaningful (read: semantic) way, you will want the flow of text to lead to the element:

<form>
 <p><label for="firstName">Please enter your first name:</label><input id="firstName" type="text" /></p>
</form>

An even better way is to treat your form like a mad-libs script:

<form>
  <p>Hello. My <label for="firstName">name</label> is <input id="firstName" type="text" />...</p>
</form>

A p element isn't the only way to mark-up a form. If a matrix of data is being added/edited, it's semantically valid to use a table.

In other cases, you might not want to use a wrapping element. It depends on what content you want to be serving up. Worry about styling it all after you've got your content sorted out.

Answer 2

INPUT elements are inline, and therefore it makes sense to wrap them in some sort of block element, so that there is a natural separation between them. Since the DIV has no margins by default, it makes sense to use a paragraph.

Answer 3

None of the leading CSS, HTML, and grid frameworks is using P tags.

See here: Bootstrap or Foundation.

IMHO, use fieldset and divs.

While W3C recommend using paragraph tags <p>, it makes little to no sense to follow their advice. The reason is: you are restricting yourself. That is: if you write your components using p tags you won't be able to put a div inside it. Putting <div> inside <p> is adding an extra <p>

well, why would you want to put a div inside a p tag? well... why not? for example you want to style your content in a way, or add some information. Using p tags you are stuck now. It seems to be bad advice as well to me.

The answer:

worry about styling once you got your content sorted out

It kind of assumes that you know what you will need in, say, one year from now.

My advice: you don't want to be like:

"I wish I hadn't used the restrictive P tags"

Answer 4

This goes for HTML 4, but maybe not for the requested HTML 5.

Ref.: 17.3 The FORM element

form needs a block-level element as child. input is an inline element. The p does the trick.