How to create a good looking form without tables, using CSS
June 10th, 2008 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.
Popularity: 7%
June 11th, 2008
Great article, Dustin. Forms are shaky ground a lot of the time. Also, I love the new design.
June 11th, 2008
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.
June 11th, 2008
@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.”
June 11th, 2008
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?
June 11th, 2008
@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.
June 13th, 2008
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.
June 23rd, 2008
Thanks Dustin, what a quick and easy insight into creating forms without using tables. Thanks again. Bookmarked!
June 29th, 2008
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
August 3rd, 2008
Is there a way to right align the DT so that its flush right, jagged left?
Tried “text-align: right”, to no avail…