Post Archive
› January 27, 2004
CSS Widgets
The CSS Zen Garden has been a fantastic resource for web designers and developers. Since it appeared, designers are realizing the power and control provided by CSS. However, the Garden is limited by the fact that its XHTML file contains mostly large text blocks and long navigational lists. What if it contained something like this?
<form id="showtimeForm" action="#">
<div id="formWrapper">
<label id="byLocation" for="locationInput">Showtimes by Location</label><input id="locationInput" type="text" /><input type="submit" value="Go!" />
<label id="byTitle" for="titleInput" >Showtimes by Title</label><input id="titleInput" type="text" /><input type="submit" value="Go!" />
</div>
</form>
I've been occasionally posting on Widgetopia for a few weeks now. While I was writing a post a while back, it occurred to me not many of the widgets featured on Widgetopia are designed using CSS. Like most large websites today, they're a combination of images, tables and bed and breakfast markup. This should be just as unacceptable as web page layouts that use use the same hodgepodge of tags.
We've started to convince designers that CSS is a powerful tool for laying out a web page. Now we need to convince designers that CSS is a powerful tool for laying out forms, navigation and other widgets. There have been several efforts along these lines scattered around the web, but I think it's time for a coordinated movement. It's time to see the beauty in CSS design for every page element, not just divs, headings and paragraphs. We've got the power, so let's use it to its fullest.
Comments
1. January 27, 2004 04:45 PM
2. January 27, 2004 11:22 PM
benry Posted…
Exactly. That's just what we did with the redesign of my site at work (http://www.nscu.com) -- all the forms are laid out with CSS only. Check out the CONTACT page or the APPLY pages for examples.
3. January 28, 2004 12:41 AM
Chris L Posted…
I agree that simple forms should definitely stick to CSS layouts however when it comes to more complex designs (such as http://www.arg.net.au/apply.asp), I've stuck with tables albeit decorated with CSS. Oh yeah... don't look at the code - it's not pretty. Although a more recent demo is much better - http://www.arg.net.au/wwwfms/
If anyone can suggest CSS replacement of tables in the above (if it's even required) then, I'm willing to change my ways.
4. January 28, 2004 03:47 AM
Dylan Posted…
If I recall, the purpose of tables is for displaying data. Forms are often just data input screens. So wouldn't it make sense to continue using tables for data input?
5. January 28, 2004 06:57 AM
ala_747 Posted…
Chris L: it's not too difficult to make a "complex" form layout with CSS, really. I've made a "5 minutes" job with your first form "et voilá". You can see (and use, if you want) it at http://www.100px.com/ejs/arg.net.au.html. It's just an example. Hope it will help you :)
Dylan: you are not exactly right... the purpose of tables is for displaying tabular data. A form (by itself) isn't a set of tabular data, normally. This is why it would't make sense to use a table for a form input.
6. January 28, 2004 08:08 AM
Daniel Burka Posted…
ala_747, your form looks pretty good, but it all falls apart if the text is resized even two sizes up in my browser. This is something I've often struggled with. Although tables aren't semantically appropriate for this type of layout, their flexible column width is very well suited to laying out forms. I wish there was some sort of algebraic quatity one could give the width of a div. I don't care how wide the div is, but I want all of the divs containing the field names to be the same width. Is this something being considered for CSS3?
7. January 28, 2004 09:50 AM
Menno Posted…
CSS is perfect for not only layout for forms; visual clues and client-side validation could be realised using a combination of CSS and JavaScript. It's not a fool-proof method but it is very quick and clean.
On this page I used a classname 'required' for form elements that were required. It both added a visual clue to the element through a background image and was used by JS when the form was submitted to see which elements were required. Of course this is no substitute for true server-side validation but it certainly helps. Ideally one would use new attributes in XHTML, but this avoids all of the namespace/DTD/validation hassle.
With CSS2 (unsupported by IE) many more useful properties like :hover and :focus could be used.
8. January 28, 2004 10:24 AM
Blair Posted…
In response to Meno's post, I'd agree that the layout you have for your form is clean and simple, but can you try to create the same simple CSS coding for a complex form like the one Chris L talks about? Not so easy ...
9. January 28, 2004 10:40 PM
Andrew Posted…
I didn't think the point of this post was CSS-formatted forms. I'm currently working on a fairly complex web based application built with only CSS. The application is largely a platform: our consulting staff spends a lot of time customizing the basic app for a client. Much of the work I'm doing is figuring out how to componetize the whole thing, from individual components and widgets, up to a set of flexible page layouts, and a set of skins that include bare-bones "wireframe" look and a fully-branded skin.
It isn't easy, of course. Much of the difficult work is considering the inventory of components and figuring out column-based layouts that can handle them. I've actually introcuded the "layout manager" method of laying out pages (like Java Swing). Instead of full page templates, our consultants can pull in a "2-column layout" unit, or a "4-column layout unit" wherever they want, and start filling it with other components. The layout managers set up columns, and the components size themselves to the column widths.
Buidling the components themselves is frankly the easiest part. Mostly things are boxes with internal headers, footers, and some predetermined padding and margins. Something like a search box is really just a minor variation on this. It's not especially useful to just have a library of components, but to have a library of compents that's structured consistently. That's the only way to really manage wholesale re-skinning of the application.
I'm hoping to publish much of the process I've gone through to manage a CSS design for a flexible application UI, if I can do it without the usual NDA yadda yadda.
10. January 29, 2004 12:45 AM
Chris L Posted…
An interesting example, ala_747, but as Daniel Burka points out the result doesn't resize very well. Check out my second example above which does.
Also, a quick check of the standards find this: "The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells." - so tables are intended to aid form layout. Plus it's always important to endeavour to separate the formatting (CSS) from the content (HTML) something which I hope is reasonably well achieved in my second example.
Finally, Andrew - you're right... I've slightly hijacked the original post concentrating more on the comments in Joshua's closing paragraph than anything else.
11. January 29, 2004 08:29 AM
ala_747 Posted…
Chris L: it was a "5 minutes" example (read this as "quick&simple"). If you point again to http://www.100px.com/ejs/arg.net.au.html you can try this one... it has 2 more minutes of work and now resize "acceptably"... maybe with 10 minutes could be better ;)
12. January 29, 2004 10:01 PM
Chris L Posted…
Ahh... no worries - I was jumping at the gun a bit :) Given that the w3c sanctions tables for form design, I think I'll stick to my current approach
13. February 1, 2004 11:55 AM
Joshua Kaufman Posted…
I didn’t think the point of this post was CSS-formatted forms.
Andrew is correct. The point was to say that CSS can be used for just about anything, not just web page layouts. Using CSS for forms is just the beginning. CSS can also be used for navigation, controls, displaying data and many other widgets. It's only limited to your imagination.
The HTML 4.01 spec does say that tables can be used for arranging forms, but it seems extraneous in my mind.
14. February 1, 2004 01:53 PM
Pintu Sharma Posted…
I also use complete css at my website, although I am learning but its a good experience so far. Have a look and send me you comments how can i improve upon it.
15. February 1, 2004 11:31 PM
Alanna Posted…
I don't think the idea of CSS forms translates well in extensive multi-columned forms, such as the one I've created at Avon Supplier Diversity. The company I work for has many of these extensive forms, which can often be customized for each new client, and since the programmers don't know CSS... tables seem the easier layout choice for such forms. I've tried figuring out ways to create CSS-based forms for something details like this, but every method I have created hasn't been very practical for our software systems. So far, I've continued with CSS-markedup tables with greater success.
16. February 2, 2004 08:08 AM
Mike Posted…
One nice thing about using CSS to layout your forms is that you can easily modify the style of the form layout without modifying your markup, as can be seen in this quick example. I had marked it up for some fellow developers at a previous job who weren't familiar with CSS or what it could do. Furthermore, I've found that CSS can work just fine for more complex form layouts with a couple additional generic classes as you can see in this example.
The downside is that those examples use fixed font sizes. However, that should be able to be fixed by using EMs in place of pixels when specifying divs that are a fixed width. Now if only all browsers would use the same default text size and they all supported page-zooming (like opera) instead, then these things would be moot points... ;)
17. February 2, 2004 02:21 PM
Paul G Posted…
My main problem with using CSS for forms is that the layout has a bad tendency to go blooie when CSS is switched off. I'd rather use one small table (It's not sacrelige, you know :) that will help maintain a logical visual structure in any situation. Try going to the example Mike mentions above and turning off CSS. Ouch.
I've been mulling this debate for a couple of weeks now, I suppose I could write a full article on it now that I have my new site up and running.
Also, regarding Menno's mention of :hover and :focus pseudoclasses not working in IE: just wait ;).
18. February 19, 2004 02:51 PM
Frank L Posted…
Is it possible to align the text of the form labels so that they are text-aline: bottom? Every example I see has the label text aligned at the top and I have not been able to figure out how to change the alignment. Any example code would be a great help.
19. February 27, 2004 10:35 AM
Aleksandar Posted…
Paul, you might want to take a look at this: http://www.aplus.co.yu/sparks/dots/forms/ with the explanations at http://www.aplus.co.yu/sparks/dots/71/
My goal was to take fairly complicated registration form and make it usable (readable) with no styles, and then see what I can do from there. Alanna, float fieldset might be the answer to multicolumns you need.
Frank, if you want to move the labels down, give them margin-top as needed. There are other things to try, but this is the least painful.
James Craig Posted…
So register cssformgarden.com and get the ball rolling. It's available as of this writing.