Megan — Mon, 23 Jul 2007 13:30:32 +0000

Eh, I've seen other things on the W3C site that weren't entirely done correctly. I believe they also have a table in the form example in the spec. I'd be more likely to look at what, say Eric Meyer does. Maybe we can ask on css-discuss or something like that. I'll put up a poll here and then when I have time I'll email around and see what some of the experts say.

If you were to do it in a table, I'm not sure you would use the and a or just one or the other...

I read that usability article too (wasn't it linked here earlier??) - I wouldn't trust usability experts as authorities on HTML code either. I don't have time to read the article again. Do they specifically recommend tables or are you just extending that from the way the examples are marked up??

andy206uk — Sat, 21 Jul 2007 11:08:29 +0000

teammatt3;221952 wrote: The W3C uses tables for forms. See for yourself. They're the standards organization, follow their example. Use tables!

Stop being dirty... we're civilised people around here, the guys at the W3 are clearly Neanderthals!

Actually, I was reading an article the other way about the best way to lay out tables to ensure usability and the outcome was basically a table layout!

Link: http://www.uie.com/articles/web_forms/

I got the paragraph definition from Google by typing "define: paragraph", but it was one of many results and certainly not the only definition, I took the one that most suited my argument

I totally agree that this is a circular argument that nobody can win. Although on the basis that the W3 uses tables AND it's better for usability maybe we should be using tables?

In fact... if you look at excel a typical screen is effectively just a big form, but at the same time, it's also a table...

I think we should come to some kind of agreement about this between us, take a vote (maybe via APC?) and start spreading the word

So what would be the best table layout? Something like this?

<table>
  <tr>
    <th><label for="name">Name</label></th>
    <td><input type="text" id="name" name="name" value="" /></td>
  </tr>
  <tr>
    <th><label for="email">Email</label></th>
    <td><input type="text" id="email" name="email" value="" /></td>
  </tr>
</table>

teammatt3 — Fri, 20 Jul 2007 23:26:43 +0000

The W3C uses tables for forms. See for yourself. They're the standards organization, follow their example. Use tables!

Megan — Fri, 20 Jul 2007 17:09:46 +0000

Where did you get that definition? I see your point though. I know the W3C has been talking about expanding the definition of "paragraph" so they don't have to invent other tags for other types of text. I also read that the W3C is/was considering replacing with because of the over-use of div's. Division, section - shouldn't be necessary here but neither should the paragraph/list tags.

I definitely agree that a form is not a table. I also agree that it shouldn't have to be a paragraph or a list. We're sort of talking in circles here though It shouldn't need extra markup > but it does need extra markup > so what is it then? > not sure, could be div, paragraph, or list > but it's not really any of those > it shouldn't need extra markup > but it does need extra markup etc. etc.

Even by that definition, I would say that a form is as much a list of items as it is "a distinct subdivisions of a text intended to separate ideas". Possibly moreso.

I guess this one comes down to whatever you think makes the most sense.

andy206uk — Fri, 20 Jul 2007 16:22:17 +0000

I just don't see a form as a list...

One definition of a paragraph is:

Quote: one of several distinct subdivisions of a text intended to separate ideas

So by that definition doesn't the label for the form qualify as a paragraph?

I've had debates with people about this before and usually someone all suggests a table for form layout to which I kind of agree but I hate the limitations of tables for layout. In all honesty, I don't think there is a right answer when it comes to laying out forms if you require it to be 100% semantically correct.

Simply put a form isn't a list or a paragraph, it certainly isn't a proper table either.

I suppose the only correct markup to use is a div which is simply a container for information and nothing more but that lacks semantics...

Megan — Fri, 20 Jul 2007 15:27:11 +0000

Fieldsets should really be used for sets within the form. So a whole personal information block would have a fieldset around it. Using them like this would preclude you from using them for larger blocks.

Why would you prefer paragraphs over lists?

andy206uk — Fri, 20 Jul 2007 14:14:00 +0000

Lol... stupid IE!

How about this?

<form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" id="name" name="name" value="" />
    </fieldset>
    <fieldset>
        <label for="email">Email</label>
        <input type="text" id="email" name="email" value="" />
    </fieldset>
</form>

It could be a total abuse of the fieldset tag, but surely it's more relevant than 's?

Personally, I'll be sticking to my paragraph tags for now.

Megan — Fri, 20 Jul 2007 13:53:57 +0000

Andy, you might want to check that in IE.

andy206uk — Fri, 20 Jul 2007 13:49:34 +0000

Aside from the 's I don't use any structural markup. I just use CSS floats and what not (if I want the input and label on separate lines, I use CSS to make the label a block level element).

I understand that the text isn't a paragraph, I would just prefer to use something that has some meaning rather than something with no meaning like a .

I suppose you could use an unordered list like you suggest, it's just a matter of preference.

Just out of interest... would this be acceptable?

<form>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" value="" />

    <label for="email">Email</label>
    <input type="text" id="email" name="email" value="" />
</form>

I've just styled that code with css and got it looking like this which is pretty much my standard form layout. Unless you wanted background colours for each row of the form (full width that is), I don't see why you would need anything around the label/input parts.

mscreashuns — Tue, 10 Jul 2007 13:26:15 +0000

I've been searching around the web since this topic came up, and it seems that the most prominent way to mark up forms without tables (of course) and DIVs is to use a list and labels. Here's my curiosity. If you were to use this list format, would you still use it for vertical forms? If so, are the label and the input each a list item, or should they be connected in some way?