Apr 12
Styling forms in CSS
2004 at 02.30 am posted by Veerle
Today I took the challenge to style a form in CSS instead of a traditional table. With forms it's always not that obvious to use CSS instead of table tags.
First of all I created backgrounds for my labels and for my fields on the right. The left (.col1) and right (.col2) columns are defined by a class each linked with a background image and a set of properties and values.
- Here is my CSS form example that I like to share with you.
This has been tested on Mac in Safari (1.2.1), Netscape 7 and FireFox 0.8 and on Windows XP in Internet Explorer 6 and Netscape 7, Mozilla and FireFox 0.8. But I seem to have floating problems on Mac in Netscape 6.2 and Internet Explorer 5.5.
Interesting tutorials on this kind of matter:
- Designing a form using CSS layouts
- Adding Style to Forms with CSS
- Fun with forms - customized input elements
- Style Webforms Using CSS
Considering the time I've spent to create this simple form without any table tags I'm wondering if it's worth in this case just to avoid table tags? It's not that this form needs any complex table code and that it will slow down loading time. Besides this looks a bit like tabular data, no? Anyway I just wanted to give it try and see if this would be doable.
11served
1
I would like to suggest the use of the definition list for forms too.
Most forms are two columns. col1 being “field definition” col2 being “field input area”.
Thus dl’s would work fairly well, and are a little more semantic.
BTW, looks good to me :D
2
Hi Veerle, have you seen this:
http://www.quirksmode.org/css/forms.html
I think it’s a little bit better than your way cause you use a lot of code.
3
“Considering the time I’ve spent to create this simple form without any table tags”
I understand it took you some time to build this form. However, your comparison with the time spent building this form using table and related tags isn’t completely honest I’d think. It would probably only take a shorter amount of time because you know exactly how it works. If you’d have to build another form tomorrow using CSS only it’d probably already take only half the time it took this first time figuring everything out.
4
I usually don’t style form elements, as I’m often more concerned with making the form do what it’s supposed to do than how it looks. But I think it can be a nice touch that helps blend the form into your page design.
Very nice example and links. Thank you.
5
@Jeff, sounds like a possible solution to me. I’ve never used that kind of code. I’ll certainly look into this, thanks ;-)
@Fabian, thanks for the tip but I know this kind of (basic CSS) code already ;-) This is just to create a “simple” form, I mean a form with “no design at all”. What I wanted was a nice looking form with some special backgrounds etc. This is a HUGE difference believe me :-S
@Joost, the problem with CSS is the “unexpected” results in some browsers not using standard code :-( You see, I have a nice form but it still looks messed up in some browsers. Not that I’m “promoting” tables here, I’m all for CSS, but sometimes it can be better to use tables for forms in some cases.
6
we have a good deal of code with styled form elements at the office. I can’t stand em. I have to process so much data on a given day, having to try and decypher the widget set from site to site is a burden. It’s cool for designer sites, but on big prod stuff with lots of users it can really slow down adoption / usage
7
I Love you for this !! ;-) I’ve been strugling the whole weekend to create something like this form ... and ditched it because ...won’t work ;-(
but this is just perfect for me !!! can I use it freely on a new project , please ? ( please ? )
8
@Roger, no problem you can use my code, but please use a bit of your own inspiration for the graphical style if you don’t mind (colors, backgrounds etc). It’s always nicer to give it a bit of a personal touch, right?
9
Hi Veerle, this morning was my first visit to your blog and i found some very interesting articles and i like your style.
And i couldn’t stop thinking about the name Duoh, it was familiar put i couldn’t remember until just now. Macworld magazine Februari 1998, ducht/belgium version that is. I remember visiting your website back in 1998 and it was so refreshing! Eversince i’ve been doing some webdesign of my own, and try to keep it refressing :)
Well keep up the good work!
10
@Lars, so cool you still remember this! Guess my article wasn’t so bad :-) Oh boy time flies! A lot has changed since then. DHTML didn’t really find its way, but let’s hope CSS has a brighter future :-) Well, I believe so… like Mulder said “the truth is out there!” :-P
11
thanks