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

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 describe开发者_Python百科d 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?

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.

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.

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"

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.