Divs or Unordered List for CSS form layout?

[fawkes]

Which is the preferred option to layout a form for a user to enter new data where the layout is CSS controlled?

Either:
Nested Divs
or
Unordered List

?

Any preferences? Pros/Cons

 

[Stretchwickster]

I generally prefer using lists to layout forms as it makes more logical sense to me. I'm not sure that there are massive pros and cons either way. Perhaps if you use an ordered list it's an easier way to number the elements of your form if that's appropriate for the particular form.

See this article for more info on styling forms (although I don't think it discusses divs vs list:

http://www.sitepoint.com/article/fancy-form-design-css/

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[feherke]

Hi

Lists may contain:[ul]
[li]Unordered information.[/li]
[li]Ordered information.[/li]
[li]Definitions.[/li]
[/ul]

Lists | Introduction to lists


I feel that [tt]form[/tt] elements match none of those categories. I would definitely use [tt]div[/tt]s.

Feherke.

http://rootshell.be/~feherke/

 

[ChrisHunt]

I suppose the "preferred" option would be to use only those elements intended to structure forms - <fieldset>, <label>, <input>, <textarea> and <select>. I've done exactly that at

http://napitalia.org.uk/eng/libsrch.shtml

, the only non-form element is a <h2> for the form title.

However, it's not always possible to do that. A list, ordered or unordered might be appropriate. Another possibility, which I've used effectively in the past, is a definition list with the <label>s in the <dt>s and the <input>s (etc.) in the <dd>s.

Tables are another possibility, and probably no worse than complex nested div structures.

There isn't one answer, though. It depends entirely on the specific situation.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd