Tableless semantically correct css form

[mute20]

My tableless form:
http://www.urmood.com/urmood_css_tableless_forms/

Hi there,

I've been looking for a good css alternative to table based forms. I found a few articles all with different implementations, however, the majority of them used div, br, lists, paragraphs etc which isn’t semantically correct. Most didn’t validate to XHTML 1.0 Strict, and fell apart in different browsers, and they also didn’t cater for radio buttons, check boxes etc as soon as you added any the form died. The css was bloated too!

ANYWAYS i’ve been working on my own tableless form which covers all the points above and seems pretty bulletproof:

Tested and working in Windows: IE 5, IE 5.5, IE 6, IE 7, FF 1, FF 2, Netscape 6*, Netscape 7*, Netscape 8, Opera 5, Opera 6, Opera 7, Opera 8, Opera 9

Thought I’d share it and see what you guys think, any feedback would be very much appreciated (good or bad I don’t mind) lol

http://www.urmood.com/urmood_css_tableless_forms/

[SoulScratch]

You do know that you can assign an ID to a form, and then apply styles to it, right? The div needs to go, and so does the class. There is only one instance of it.

What's up with the "34.58em" width? Proprietary class name on the div wrapper? Why is there a "txt" before each id/name/for attribute?

Why are there inline styles, and why don't you have external stylesheets?

Other than that it looks consistent on FF 1.5 / IE6 (too lazy to check other browsers; will take your word for it). The em might be a problem if you're applying graphics (fixed width).

Not bad.

[Kravvitz]

The fieldsets are too wide in IE5/Mac and the <textarea> is too wide in Safari. Also it seems that clicking on a label does nothing in Safari. It may work if you nested the form control in its label.

Try adding this to the stylesheet.

/* for IE5/Mac only \*//*/
*>html .nestedFieldset{
	display:inline-block;
}
/* for IE5/Mac only */

The div needs to go, and so does the class. There is only one instance of it.

Yes, there is only one member of that class, but that does not mean that you should change it to an ID.

Why are there inline styles, and why don't you have external stylesheets?

Embedded stylesheets are helpful for demos so that you don't have to open a second window to see the styles that are being applied.

[mute20]

Kravvitz you beat me to it lol Thanks for the IE/mac and safari results

There is no external stylesheet as I thought it would be easier for folk to view the source.

There are inline styles as i just knocked the page up as a demo.

The reason it is a class and not and ID is that on a large site with many forms you would use the class again.

The "txt" is just something i like to use thats all lol

"Proprietary class" could think of a better name lol

[SoulScratch]

Embedded stylesheets are helpful for demos so that you don't have to open a second window to see the styles that are being applied.

Agreed, but I did take a look at the actual main site and noticed there was no external stylesheet on that; so i assumed he didn't use external stylesheets.

[Kravvitz]

Ah. I didn't look at the code of the site's main page.

Perhaps mute20 will make the stylesheet external when he recodes the form on that page to be tableless.

[Stormrider]

You don't need to wrap the whole form in a fieldset IMO, each section has a fieldset which serves as the block level element within the form, why have another one around the whole thing? A fieldset means a 'set of fields', not 'a useful tag to serve as a block level element when I need one'

Also, the div should go, just put the class on the form, as someone said above.

[mute20]

Hi Guys,

Thanks for the feedback so far. Taking your comments in to consideration I've updated the code. How are things looking now?

Also if anybody knows of a better tableless form implementation it would be good to know as I haven't managed to find any??

Thanks again