HTML Forms - In your opinion, how should they be done and why? (<div> vs. <p>)

I've been a developer for a long time, however forms have always been my least favourite part, more specifically designing them!

I'd really like to know how you do you forms, and why. I've had a few discussions with fellow developers over <div> vs <p> on form fields. Which one would you stick with, and why?

An example of what I am talking about:

<form action="" method="post">
    <p>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </p>

    <p>
        <label for="submit"></lab开发者_运维知识库el>
        <input type="submit" name="submit" id="submit" value="Log In" />
    </p>
</form>

VS

<form action="" method="post">
    <div>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </div>

    <div>
        <label for="submit"></label>
        <input type="submit" name="submit" id="submit" value="Log In" />
    </div>
</form>

When it comes to styling, it seems you can do pretty much the same with both, so is it just personal preference, or is there logic behind using one over the other?

Thanks for your time :)

UPDATE I ended up following a nice article on HTML5 forms and have actually found it to allow MUCH better styling of forms. They are much more organised from a development perspective too. For anyone interested, it is located here: http://24ways.org/2009/have-a-field-day-with-html5-forms

HTML is all about semantics. There is no reason username or submit should be inside a paragraph (<p>) because it's not a paragraph.

So I would go using <div> instead. Ok, maybe <div> has no meaning at all. But it's better than <p>.

I prefer the <div> variant, because its semantics is closer on what you want to express and markup.

A <p> tag is for text paragraphs, whereas a <div> is a general block of any kind.

One option I'd like to suggest:

You could consider wrapping the input inside its label. That way you possibly can avoid additional elements. Also (if you don't need to support IE6) then this allows you to drop the for. And finally if the input is a check box or radio button, then it allows the user to click on the whole text instead of just the tiny control, just like in most operating systems:

<label>Username: <input type="text" name="username" /></label>

Also I'm not sure what the point of an empty label for the submit button is good for, except being lazy when writing the style sheet.

Just thought I'd throw my 2 cents in (assuming we all agree that semantic markup is the goal):

While one can argue that form elements themselves are not semantic, this doesn't mean that the context in which they appear is not as well. There is no "one true way" to markup all form controls.

If the control is actually appearing in a paragraph of text, that is fine - but that pretty much never happens.

• If it is an ordered list of checkboxes for example, put them in an <ol> tag.
• If order is not relevant, use a <ul> in that case.
• If it is a label/text_input pair, one could argue that a <dl> element is appropriate
• If it is a spreadsheet, use a <table> (Yes, tables can be appropriate! In fact, I've heard the (questionable) argument many times that form data is tabular)

_{By the way it is considered a description list in HTML5 to clear up confusion about meaning, and whether or not it's appropriate for things other than literal definition terms.}

Almost no one will ever say a <p> is appropriate, but very few will argue that a <div> is inappropriate because there are no attached semantics.

Semantically, each label is bound to its control through the for attribute. There's no need to wrap the pair for semantic reasons, although you may wish to do so for styling reasons. So div is appropriate.

Similarly, grouping of controls has a dedicated element fieldset so there's no sense in using ul, ol or dl for that purpose, and using them is simply a form of listitis.

What about fieldsets ? - it is more logical for forms

And in fact you can style anything the way you want

Semantically I'd say divs make more sense simply because they have no semantic meaning and the only reason to use a block container like this is for layout purposes. That said, I use paragraphs, but completely out of habit. It's the only place I use paragraphs while not considering their semantic meaning.