This sample form will validate XHMTL 1.0 Strict, and it will render with reasonable consistency across the following Web browsers:
It may not look exactly the same across all those browsers, but it will look decent in all of them (some moreso than others, obviously).
Forms are notoriously difficult to style, and to get a form even to this point takes a lot of effort. So you are welcome to use this form in whole or in part to create one of your own. If you choose to credit me, that would be terrific, but it’s not necessary.
I’ve done my best to keep the markup and CSS simple and flexible enough to accommodate different kinds of input data. However, I make no claims that this form will be easy to adapt to your own needs. And I cannot help you if you run across problems while working with it.
If you can improve upon my markup and/or my CSS, please share your changes with me — I’ll post a new version of this form for others to benefit from. Thanks!
Khoi Vinh
Mon, 22 Aug 2005
P.S. You can read more about why I did this in my blog post.
This solution chooses to ignore Opera's problem with 'legend' in favor of accessibility: (position: relative styled) legends inside field-sets. Explorer has the same problem but is easily styled right with future proof css selector for the good kids (which includes Opera).
In the end it's about priorities and for most projects I feel accessibility and standards are more important than a styling issue in a browser with a relative small market share (By the way, no idea how this renders on a mobile device where Opera is a pretty big player)
Thomas Maas
Tue, 23 Aug 2005