Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- CSS Trick: Target only IE with an if statement
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
How to create a good looking form without tables, using CSS
Posted on Tuesday, June 10th, 2008 under CSS, XHTML by Dustin Brewer.There are a lot of different attempts that we have all made over the years to master the quirky art of creating an aesthetically pleasing form. The trouble is being able to control the form and have your labels and inputs match up nicely without going to too much work. We’ve all made a form in tables, regrettably. For some this has been the only option due to restraints from CSS or frustration with cross-browser compatibility.
There is more than just having a label and an input when it comes to accessible form creation. It is important to utilize the “for†attribute within the label tag to ensure that screen readers are able to associate the label with the input object. It is also a huge usability addition to be able to click the label and set focus to the input object, especially with radio boxes.
A proper and simple form should look something like this:
<dl class="newsletter"> <dt><label for="name">Name:</label></dt> <dd><input type="text" id="name" value="Enter your name" /></dd> <dt><label for="email">Email:</label></dt> <dd><input type="text" id="email" value="Enter your email" /></dd> </dl>
As I’m sure you have noticed I used a definition list in this example. This is the basic HTML markup for styling a form with CSS. Using tables to do this is no longer necessary and this method will actually prove to be significantly less work. Especially if you have multiple forms throughout your site, with the beauty of CSS.
The CSS to ensure that this form works correctly across all browsers is:
<style type="text/css"> .newsletter {width: 50%;} .newsletter dt {float: left;} .newsletter dd {margin: 0 5em 1em 5em;} </style>
With these simple lines of CSS and following the plain example, you can simply add on to it with additional markup to build on the visual appeal of the form.
Whats Next?
13 Responses to “How to create a good looking form without tables, using CSS”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
Great article, Dustin. Forms are shaky ground a lot of the time. Also, I love the new design.
Great post! Using a definition list for forms is an excellent way to get nice looking forms. The only caveat I would leave is that you have to be very careful about the width of your form elements – if they are too wide, they can wreak havoc with the design. And because the labels are floated, you can end up with form fields in unexpected locations. But this is an excellent use of the definition list.
@Matthew I’m glad you like the new design.
@Jennifer Thank you. I agree, it is important to tweak the form beyond the general width percentages I have set to match your needed placement of your form. I thought about adding a fully marked up version to show what can be done. May save that for another article, something like “Beautifully designed web forms using css.”
Hi dustin,
It’s been a long time i’ve visited ur blog. And this post of yours on creating forms using CSS made me peek into your brand new looking blog. I must say it made my eyes pop. This design is simply beautiful. I like it.
Also, can we expect something more on creating web forms and making it work? may be a tutorial…Wat’s your say?
@grafic7 Absolutely, I think I’ll have another post coming up about styling web forms that may be a little more in depth about how to manage them and may even add some tutorials using JavaScript to improve them.
I’ve gotten a few email questions about forms since posting this also that I’m going to be answering soon.
I’m glad you like the design, I’ll be tweaking it a little adding some stuff in the coming days to make it look even better— I’ll also be updating some older posts to make sure they all adhere to the current design.
It would have been nice to have added a picture of what the form looked like.
I’ve been trying to use this dl/dt model for some lists at our site.
Works pretty well.
Thanks Dustin, what a quick and easy insight into creating forms without using tables. Thanks again. Bookmarked!
Hi
So long I was using the ul,li tags to construct a form. This one is new for me and I am really going to give it a try in my next form page.
Regards
Cyril
Is there a way to right align the DT so that its flush right, jagged left?
Tried “text-align: right”, to no avail…
I have not used this manner of creating a form, I use “Fieldsets” in such a manner to group the field elements into there composite lists.
if validation is to be added, a span can be added (inline element) to the end of the last element – input field or select drop down field.
example: (pardon spelling it is late!)
some heading:
error! text
Css is then applied to the above in minimal fashion.
my manner is different, but in all things development, there is more than one way to skin a cat.
Quinton.
Hi,
this is a really good idea to get my mind on something else than tables for cross-browser support. But I’m having some problems width this. I’m not going to send you the code here, but I am going to ask you if you interested in looking in to it.
The problem is basically with IE, witch is screwing up this method.
if you put this inside a div and make a width style property on the div, it brakes apart.
Best regards
Einar
[...] the rest of How to create a good looking form without tables, using CSS (199 [...]
Super Beitrag!
Frohe Weihnachten