You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Apr 12

Styling forms in CSS

2004 at 02.30 am posted by Veerle Pieters

CSS formToday 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.

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:

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

gravatar

1

permalink this comment Jeff Minard Mon Apr 12, 2004 at 03.30 am

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


gravatar

2

permalink this comment Fabian Mon Apr 12, 2004 at 09.53 am

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.


gravatar

3

permalink this comment Joost Mon Apr 12, 2004 at 09.54 am

“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.


gravatar

4

permalink this comment travis Mon Apr 12, 2004 at 10.52 am

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.


gravatar

5

permalink this comment Veerle Mon Apr 12, 2004 at 10.55 am

@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.


gravatar

6

permalink this comment jared Mon Apr 12, 2004 at 11.31 am

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


gravatar

7

permalink this comment Roger Tue Apr 13, 2004 at 02.13 am

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 ? )


gravatar

8

permalink this comment Veerle Tue Apr 13, 2004 at 05.48 am

@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?


gravatar

9

permalink this comment lars Tue Apr 13, 2004 at 01.48 pm

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!


gravatar

10

permalink this comment Veerle Wed Apr 14, 2004 at 01.31 am

@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


gravatar

11

permalink this comment javier pastor Fri Apr 22, 2005 at 07.15 am

thanks



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist