SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Nov 28, 2006, 23:51 #1
- Join Date
- Nov 2006
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Tableless semantically correct css form
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/
-
Nov 29, 2006, 00:17 #2
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Nov 29, 2006, 00:23 #3
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Code:/* for IE5/Mac only \*//*/ *>html .nestedFieldset{ display:inline-block; } /* for IE5/Mac only */
Originally Posted by SoulScratch
Originally Posted by SoulScratch
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Nov 29, 2006, 00:40 #4
- Join Date
- Nov 2006
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Nov 29, 2006, 00:48 #5
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Kravvitz
-
Nov 29, 2006, 01:31 #6
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Nov 29, 2006, 06:58 #7
- Join Date
- Sep 2006
- Location
- Nottingham, UK
- Posts
- 3,133
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Nov 29, 2006, 12:21 #8
- Join Date
- Nov 2006
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Bookmarks