sure there are plenty of pre-fabricated solutions for web forms. one awesome place to go to is the wufoo form gallery. not only do they have super-clean form templates for everything you might need a form for, they also provide you with a color styling tool and the css/html code to put it together.
but if you don’t want to go through all of the forms there and remove the fields that you don’t need, here are some tips for creating the perfect web form.
1. use labels
You don’t need labels for your form to work, but if you want to make your form accessible, it is a 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 without having to clutter your css code with classes.
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.
3. don’t mess up 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 setting your border to 0.
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 like safari to change even if you want to.
4. using the focus pseudo class
You can apply styling to your input areas and textareas that only takes effect when a user has clicked into that area using the focus pseudo class. what this does is when a user clicks a certain field, that field’s border or background-color will change color. For example, you could change the border color on those elements like so:
textarea:focus, input:focus {
border: 2px solid #900;
}
5. clearing your textfield values
it was quite nice of you to include default values for your textfields to help users figure out what textfield does what. but how annoying is it when i click a textfield and i have to highlight the entire value before deleting it? well you can help your users out by clearing out those default values when they click in the field.
Related posts: