CSS forms
- Started
- Last post
- 28 Responses
- seed
Can any one here recommend the use of CSS for laying out large forms as opposed to using a table? Do you consider a form tabular data?
- UndoUndo0
use the label tag with each field for validation purposes, you can do a tabular layout with css
- nocomply0
Good questions. Most new forms I'm seeing these days are table-free. I think putting it in a table may save you a headache initialy, but the beauty of CSS is that once you create one form, you've got your stylesheet set up for any others that come your way in the future.
That being said, I've run into a few problems here and there with cross-browser display issues when i do CSS forms (such as lining up text perfectly next to checkboxes, etc...) Why do forms have to be so damn buggy?
- seed0
Also, this is for a huge app with fields that may be grouped differently thoughout the pages. Maybe for something like that a table would be less of a bother.
- seed0
btw, some of the pages I am talking about could have 50+ fields and be grouped differently as I said.
- UndoUndo0
weigh up accessiblity aginst CSS if its a big job
- nocomply0
Seed - then it sounds like you should use tables to me. Save yourself from making tons of classes to style individual input items just so. Large forms are such a pain in CSS.
CSS may be all the rage, but really there is nothing wrong with a well placed table.
- seed0
weigh up accessiblity aginst CSS if its a big job
UndoUndo
(Jun 9 06, 09:21)Are you referring using CSS for improved accessibility. I didn't get that clearly.
- seed0
nocomply, CSS makes good sense if it is a simple form but I think you are right.
It would still be XHTML Strict complaint anyway.
- nocomply0
http://www.456bereastreet.com/ar…
May be of some help
- UndoUndo0
yeah sorry,home time here so typing too quickly
what I meant was weigh up accessibility(CSS)and central control against tables.
if your not worried about vaildation then use tables.
hope that helps
:)
- nocomply0
Yeah seed basically the way i've been doing it is like this....small, simple form..go CSS. For big forms that are a bitch, do whatever method yields the best cross-browser results (usually involves some tables). I don't know if that's being lazy or being smart, but it works for me.
Forms are so fugged up i don't think there's ever a pretty solution.
- seed0
Yeah thanks, I hope that it doesn't go against the idea of only using tables for tabular data. I read a definition of tabular data that described it as any systematic display of data. Oh well, as I said it will still be valid XHTML strict with all display controls in the CSS.
- version30
use css
tables are a waste of time
between absolute & relative positioning, it can look better than a table
besides with css and javascript you can use the dispay property in css for visibility to slowly expose more fileds as they fill out the form
besides, i'd be happy to never write < table > < tr > or < td > again
- seed0
The JS thing you mentioned sounds good as it could be more flexible. I am not sure it would be worth using CSS as there will probably be 200+ screens with sometimes 50+ fields on a page.
- version30
i understand the large amounts of entry fields, but a class for each of them is unnecessary
how many sizes do you think you will actually use?
100px
150px
200pxetc. you should only need a class for ech different field size color etc
- seed0
I've got classes for that. I am more concerned with laying out all those fields out while also grouping certain ones together properly.
- nocomply0
It CAN be done with css, but as versin4 said, you're probably going to have to mess around with a bunch of different relative and absolute positioned elements. Probably a lot of floats and clears in there too. I try to avoid using tables so I work with that stuff until my brain explodes, then just give up.
If anyone has some links to some clean forms, please post em!
- version30
google said
http://jeffhowden.com/code/css/f…
- nocomply0
All the discussion got me curious, so I read up a little on forms in this book i have sitting on my desk. http://www.cssmastery.com/
It describes a technique similar to the link v4 sent. So yeah maybe go for the css layout. take your time and let us know how it goes. obviously it can be done.
- seed0
Most examples beside that last link are very small and simple. That one is still really one long column and has a lot of CSS involved.