Becoming a Sexy Programmer: Clean Forms

By Eric Berry
October 7, 2008 | Comments: 1

I rarely create a website or application without having to use forms. There are MANY techniques that you can use to stylize forms. One of the most common (at least in the past) methods of doing this is by using tables. This is definitely a proven method that will guarantee that your form looks good.

Goal: Create a form with CSS using half the code than by using tables.

Here’s the form that we are going to create:

Let’s first take a look at what the code might look like if we are using tables to layout a form:

Ok.. again, this does work. It’s great especially if you love to duplicate your efforts and enjoy pointless challenges. Hey, maybe some of you do.

For those who don’t like spending more time creating forms than they have to, you can always use CSS instead.

Here is an example of the exact same form but written using CSS instead of tables:

This may not appear as much less code, however, the payout is when you want to style the form.

Let’s look at the CSS tags in the head.

fieldset { width:350px; text-align:left; border: 1px solid #ccc; }
Here we set the container of the form. This sets the border around the form and the width of the form.

legend { font-weight: bold; color: #666; }
This tag sets the legend color and text style. I’ll explain how you can even make it look better in a bit.

p { margin: 0 0 3px 0; padding:0; }
Here we add a bit of a margin below each of the rows. This is similar to setting cellpadding=”1” in the table tag.

label { position: absolute; text-align:right; width:130px; }
Because we set the position to absolute and the width to 130px, this acts as a block that is 130 pixels wide, and is aligned to the left. Also, because he position is absolute, it won’t affect the position of the input tags to the right of them.

input, textarea { margin-left: 140px; }
This style sets the position of the input tags to 140 pixels to the right of the far left edge. Notice that this is 10 pixels more than the label tag width. This is why there is a 10 pixel spacing between the labels and the input tags.

label.check, label.radio { position:relative; text-align:left; }
This is an override style that is meant for check box and radio box labels. Here we override the position from being absolute to relative, which means that the position it is at is relative to it’s previous element. Also, we override the alignment from right to left.

Fieldset Styles

Now that you have the base code for this, you can see different fieldset style options at http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/

There ya go. Not as difficult as you may have thought :-D


You might also be interested in:

1 Comment

If you zoom in (ctrl-+ in Firefox) the text will eventually overlap. This can be very annoying for visually impaired users or people with large screens and low DPI. With a table layout this usually does the right thing.

Do you have a good way of doing this with EMs instead of pixels, so that zooming works as it should?

News Topics

Recommended for You

Got a Question?