Best way to mark up Forms?

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??

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

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.

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...

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?

Lol... stupid IE!

How about this?

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.

Andy, you might want to check that in IE.

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?

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.

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?

Well, as I said, a form input is definitely not a paragraph. Ideally we would use option 6 and not have extra structual mark-up in there at all. Option 4 would be the ideal because there is no extra structural mark-up. Semantically it's not needed. However, it's really difficult to lay out forms like that with CSS, so you have to add some structure around them.

Then back to the question: if you have to add structural mark-up, what do you use? Do you just have a line break there? are to be used as a last resort IMO. They don't really have structural meaning and are only necessary to work around some other problem. Now we have to look at the other structural options. A form input is definitely not a paragraph or a table. Is it a list? That sounds most sensical to me.

Is it a definition list or a regular list with the label in it? I sort of think that having the makes the definition mark-up redundant. But, on the other hand, these are name/value pairs so in that sense the definition list makes sense.

So the advantage is proper structural mark-up and separation of presentation from mark-up

I also use to wrap, to break and no labels, just form elements, then use CSS to make it look pretty... What are the advantages of using list or options 5 and 6 for example?

Arguably, forms are the most contentious and difficult elements of web design. I am looking forward to a new book, to be published next winter: "Web Form Design Best Practices".

In addition to a couple of resources on that book announcement, the author has written an article on the subject. Hope these help.

I use:

You can then style this in a number of ways using CSS depending on what you are going for and it works with almost all traditional form layouts.

Good topic. I've been doing a lot of forms too and I use option 4 (never knew there were so many ways!).

Quote: (this is functionally too difficult because there's not a good way that I've found to make sure the labels clear while still aligning with the form elements)

I've been through a dozen of those tutorials about making the forms structured like tables but using CSS, it's just too much work, and too much excess markup. On simple forms I'll use CSS, but tables take on the big forms and yes, I do know that the CSS nazis will come after me for it, but ya gotta do what ya gotta do.

How do you usually layout your forms?

Fieldname inputbox

or

Fieldname
Inputbox?

If you don't want to use break tags, then you can put each one in a div tag.

Actually, I couldn't find this on a search so that's one of the reasons I posted it.

Labels are supported (well, they display stuff anyway). It's a good way to semantically connect elements to their labels

pr0grammr - I'm working on that positioning. Watch for article on APC.

(Aren't you guys [Megan/JeevesBond] married? So couldn't you, I don't know.... TALK?)

Anyways...

Why the focus on labels and things?

None of that really matters and/or is supported at the moment, and isn't foreseen to be so for a few years. I personally just stick to the normal form stuff, using the inputs, selects, etc. as needed, but I don't bother with labeling anything other than attaching an id on the elements.

I use this layout for all my web forms, but if this is just a multiple choice question, I would choose 3.

As for another suggestion, I would add the following code to the "#contentbox div.tooltip .helptext" block, so the text floats to the right and not bump down the entire form.

Option 3 is out straight away (you probably already know this, but wanted to provide the option). It's semantically incorrect to use a list to label form elements. That's what the [incode]label[/incode] tag is for.

Option 4 is the ideal, but not always practical as you may need extra markup for styling etc.

Option 2 would be what I'd fall back on if requiring extra markup. It's a good choice because--as you said--a definition list is for marking up name/value pairs.