Chris Morris : Lethbridge Web Design & Development

I love forms. I won’t deny it, they are pretty spectacular. Whether their purpose is to gather account information, make a reservation, or subscribe to a newsletter, every form is special in it’s own way. They are one of the most basic interactions a user will have with a website but it doesn’t mean they have to look that way.

With the advent of Web 2.0 and a focus on the User Experience we have moved past the days of simple black & white html forms to well crafted and visually appealing user interfaces. The first ingredient to a tasty form is valid and semantic markup. It’s the basic elements in a valid form that gives designers the control they want over how it looks. Let’s take a look at our example in it’s most basic structure.

Fig. 01 - Basic Form Structure (view page source).

Pretty ugly. In fact, downright hideous. Their is no consistency or visual appeal to the layout, no indication of focus or required fields, quite unfriendly to the average user. Unfortunately at this point a large portion of designers will immediately turn to tables to format their layout, every time this happens the internet dies a little inside.

It doesn’t have to be this way. We can achieve beautiful and accessible forms without tables, javascript, or an obscene amount of spaces by utilizing it’s important tags; <form> <fieldset> <label> <input> and a little bit of CSS magic. Another important tag that I didn’t use in our example form is <legend> , very useful for organizing large forms by adding captions to fieldsets.

Fig. 02 - Basic Form Style (view page source).

A huge sigh of relief. Adding some basic styling with CSS gives this form some much needed spacing and alignment. I started with giving the <form> a set width, padding, and a border. I wrapped each pair of <label> and <input> elements in a <div> to add some padding, a border, and for some fancy styling later on. What makes the <label> and <input> elements sit next to each other so nicely and not staggered is giving the <label> element a specified width and floating it to the left. The inline elements will fall into place and your left with a clean and clear form.

Fig. 03 - Fancy Form Style (view page source).

Taking your form to the next step in elegance and accessibility is only a few pieces of code away. I gave a background to each div wrapping the <label> and <input> elements. I also added a focus pseudo class for the inputs (input:focus, currently supported by Mozilla).

The simplicity of achieving effective and accessible forms with CSS gives no excuse for the use of tables. There are plenty of great techniques to achieving any layout or effect with your forms, all it takes is a little forethought and ingenuity.

*Known Issues
If your label is longer then a few words it must extend the wrapping div, this pushes the next div below to the right. To fix this you can play around with floating the wrapper div as well as the label.