Is it OK to group form elements into "p"?

Question

Let's say I have this code

<form action="#" method="get">
    <p>
        <label for="name">Name:</label>
        <input type="text" name="name" />
    </p>
    <p>
        <input type="submit" />
    </p>
</form>

Is it semanticaly fine to group elements with p? Because my teacher (again.. I know ..:P) told me that p should be used only for paragraph and that I should use div instead, but as I can see, p is used a lot and almost everywhere.

The last possibility I can think of is <br />, which I think is the worst way.

So which one is the best to use

• wrap by <div>
• wrap by <p>
• <br /> at the end

Answer 1

Semantically, I would (in this case) agree with your teacher and prefer <div> over <p>.

Answer 2

I would wrap it using <div/> and then style appropriately using CSS.

It seems to me a much cleaner separation of the structure of the page versus the layout/styling of that page. e.g. you're at liberty later to style it for different devices, print ec.

Answer 3

Check out this related question and this one.

Honestly, I don't think it's a huge deal, but using <fieldset> is probably the most semantically correct way that will make your teacher happy. In the real world, though, I group forms by <p> sometimes.

Answer 4

I use <div class="field">...</div> for individual form fields and <fieldset>...</fieldset> for groups of related fields.

For the buttons at the end of the form (submit/reset/back/etc) I use <fieldset class="controls">...</fieldset>

(I also have a set of CFML custom tag scripts which generate the HTML for me, so I can just write, for example, <form:edit id="MyField" label="My Field" ...etc... /> and it produces the appropriate HTML without needing lots of repetitive sourcecode.)

Answer 5

Your teacher is correct. P = paragraph. So ask yourself the question, is it a paragraph of text? If not don't use it.

You wouldn't play football with a cricket ball just because it's round

Answer 6

I think the most semantic way is to do it with a list element, like described in Prettier Accessible Forms, since most forms is actually much like a list of fields to fill out, I figure it makes the most sense, semantically.

If you want to have a group of fields, fieldset is good for that, but I almost always put each form item in a <li>.

Answer 7

Neither, IMO.

Fieldset combined with a list (or maybe even a table) is far more semantically correct.

• P is wrong plainly because a form just is not a paragraph.
• DIV has no semantic meaning whatsoever - it's just "part of something", so using it alone to contain the form makes no sense.
• Splitting by BR has no purpose, as you can just as well provide styling on your labels and/or input-fields to simulate the line break.