It used to be that I would design the front-end for my form using a large number of nested tables. I was somewhat happy in my ignorant bliss. It was just what you had to do back in the day if you wanted your form to look half way descent. It wasn't hard to format your forms this way but it just ended up taking a lot of time because of all the code that was required for the large number of nested tables.
Nowadays we know better and we know that we shouldn't use tables unless it's for tabular data. The other day I was working on a form for a project and it occurred to me that the XHTML that I was using for the form was simple and it took a lot less time to make the actual form. However, I was finding now that I was spending just about as much time hacking the CSS so that my form would look just as pretty in Internet Exploder (Ops, I mean Internet Explorer) as it does in Firefox.
Because of the time I was spending I thought it would be good to extract my completed form from my project and put in a generic format so that I could use it as a library to share with other developers, get feedback, and hopefully save some time when I need a form of this nature again in the future.
So without further adieu here is my form for all the world to see. I would appreciate any feedback that you might have on how one might be able to achieve this same look with less CSS and possibly better XHTML markup.
del.icio.us
digg
newsvine
blinklist
magnolia
Please be considerate of others. Keep comments relevant. Content deemed inappropriate or offensive may be edited and/or deleted. Email addresses are never displayed.
Line breaks and paragraphs are automatically converted — no need to use p or br/. Quotes, apostrophes, and double-dashes are automatically converted to smart punctuation. Be careful when copying and pasting portions of entries or other comments.
Links can be created using the standard <a href="http://url">urlName</a>. The following inline HTML elements may also be used: strong, em, cite, & code. The title attribute is allowed within any element. All other code will get removed before posting.
Comments