Tips For Creating Great Web Forms

* Posted on: 11/11/2007 By: Chris Coyier *

1. Use Labels

You don't need labels for your form to work, but as one CSS-Tricks reader once put it, it is an accessibility crime not to use them. Labels are what signify what the input box is for and associate them together. The use of the <label> tag is not only semantically correct, but it gives you the opportunity to style them uniquely with CSS.

2. Float Your Labels

This is how you achieve that table-like structure on forms without having to actually use a table. Just set a static width, float it the left, align the text to the right, and give it a little right-margin. Beautiful.

label {

float: left;

text-align: right;

margin-right: 15px;

width: 100px;

}

3. Careful To Not Wreck Your Default Styling

A lot of browsers have default styling applied to input buttons. This provides a nice consistent user experience, so if you choose to interfere with this, make sure you have a good reason. A common way to break this is by using a CSS Reset technique that includes something like this:

* {

border: none;

}

That can be nice, as it will prevent unwanted borders showing up around objects you didn't intend, but it will also break the default styling for input buttons in Firefox. Some browsers are more resilient and some are hard to change even if you want to (Safari).

4. Use the :focus Pseudo Class

You can apply styling to your input areas and textareas that only takes affect when a user has clicked into that area using the :focus pseudo class. For example, you could change the border color on those elements like so:

textarea:focus, input:focus {

border: 2px solid #900;

}

Most browsers support it, so you might as well use it. Think forward-enhancement.

5. Prefill With Hints, But Clear Them Away

It can be useful to prefill your input fields and textareas with little hints or reminders. For example if you have a general contact form and a textarea labeled “Message:”, you may want to prefill that textarea with something like “Your positive comments or constructive criticism here.” Or, you could have a name field which is prefilled with “First Middle Last” so that you can remind users that is the order they should fill in their name. You can do that just by including text within your tags:

<textarea name="Message" rows="20" cols="20">Hint goes here.</textarea>

But if you stop there, the user will need to manually delete whatever you enter there, and that's no good. You can add a little Javascript to clear that hint away when the user clicks inside that box. This little code snippet also only allows that to happen once, so if the user clicks away and then back in, they won't lose what they have entered.

<textarea name="Message" rows="20" cols="20" onfocus="this.value=''; this.onfocus=null;">Hint goes here.</textarea>

6. Make it work with Web Form Factory

Forms aren't there just to look pretty, they need to work. There are two primary functions a web form can have: to interface with a database or to generate an email. Web Form Factory is an open source service which takes your form and generates the code needed to make it do what it needs to do.

7. Consider a Prefab Solution

Web forms is territory that has been gone over again and again and again. This is one area where not “re-inventing the wheel” might be the best decision you can make. If you are looking for a simple contact form that generates emails, I have created the Nice & Simple Contact Form, which I first posted about here.

---