8 replies [Last post]
seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Well, with nothing better to do yesterday I thought I'd sit down and write some arbitrary page, and decided to do forms.

I've written loads of forms using CSS layout instead of tables, and if it's one thing I've learnt, it's that floats are more hassle than they're worth - there's so many issues with them and for more complex forms than this you always seem to end up with issues.

[link removed]

Let me know what you think, any bugs/comments.

Only tested in IE6 and Firefox at the moment since it's all I had installed at home.

I need to modify the javascript so that it checks <textarea>s and <selects>s as well as <input>s. Will also add some code for radio-buttons support, but the idea of hassle free basic form validation is there I think Smile

Also tempted to flaunt the CSS validator and shove in a behaviour rule to get the focus styles on form elements working in IE.

Comments please! Smile

PS Just tested it in Opera 7.21 - I hate Opera :oops:

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

My take on CSS forms

I just want to say thanks for taking the time to post your thoughts on this subject. I am about to start my first CSS form so your post is timed well for me Smile

Life's a b*tch and then you die!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

My take on CSS forms

Hi seb,
Laying out forms has been something that has caused many problems for me over the years.

I took browsercam captures for you http://www.browsercam.com/public.aspx?proj_id=100702

Your form works well in the newer browsers, but there's still a little bit of work needed to get the older browsers looking alright.

Like you I have tried many different ways to lay them out without any really success.
Lately I have been using definition lists to display forms.
I don't really think they are the best way to go but they do associate the labels with the fields and display well in most browsers.

In May this year I gave a presentation to the Web Standards Group on floats and forms.
Here's the Power point slides http://webstandardsgroup.org/resources/documents/floats-forms.ppt
and here's a link to a test page http://www.csscreator.com/attributes/tests/form.html

I don't really think using Definition lists or Divs provide a perfect solution but at least they are a start.

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

My take on CSS forms

Cheers Tony, will have a look at your links when I get a moment! Had a browse of the browsercam link though, most of those I (probably wrongly) don't care about, but I'm annoyed that IE%Mac has issues - I thought that was supposed to be a good browser?!

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

My take on CSS forms

I like the idea of definition lists, looks pretty good to me - good work Tony!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

My take on CSS forms

Hi seb,
They were the best I could come up with at the time.
I really hope to find a better way sometime, although there is nothing technically wrong with using DL for forms semantically it's not really right.

tom_de_schlong
tom_de_schlong's picture
Offline
Enthusiast
UK
Last seen: 11 years 2 weeks ago
UK
Joined: 2004-06-13
Posts: 92
Points: 0

My take on CSS forms

Nice Presentation tony i am just in the process of putting a form on a website and this has helped no end

Also thanks To seb for proving so,me great ideas in his example

Want a free Ipod, live in the US or UK then please <a href="http//ipods.freepay.com/?r=21545802">check this out</a>. Plenty of people have already got one just search google for freeipods.com.

Peter Mount
Peter Mount's picture
Offline
Regular
Melbourne Australia
Last seen: 15 years 28 weeks ago
Melbourne Australia
Timezone: GMT+10
Joined: 2004-08-08
Posts: 19
Points: 0

My take on CSS forms

Hello

Has anybody looked at the forms tutorial at the Web Standards Project web site?

It's at:

http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

Have a good day

Peter Mount

seb
Offline
Enthusiast
Last seen: 15 years 45 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

My take on CSS forms

All stuff that I'm pleased to say I already use, with the exception of the final point, modifying the <title> tag when there's an error on a form, a good idea.