Considering forms

Every web designer is guilty of form sins. Forms seem to always be an after thought with regards to design on most websites. Recently, I have been pleased to see some great examples of forms that have been designed rather than whacked on. It is getting the case that the ugly forms are less and less visible, but while they are still there the cause for attractive forms has not been won. Even, if you have styled your form sometimes there is by a simple review a nice twist you can add to their design.

So, why do we overlook forms so much and leave them out in the cold, unstyled and plain ugly? It’s as though we have something against forms, we chuck unrequited Javascript at them (yes, there is sometimes the need but not always) and resign them to no styling like some unloved part of the website.

It probably has to do with the fact that actually creating an XHTML and CSS valid form is one of the harder things to be done. Once you do it, yes it does become clear, but for anyone starting in XHTML it really is an uphill struggle when it comes to forms. Finding the resources online to help you with creating these forms is often hard and many resort to clunky invalid form generators or falling back on tables just to get some alignment. A simple structure for a form can be distilled possibly to this skeleton or template which will validate as valid XHTML strict:
<div>

</div>

This is of course one option that you can add many things too boost the accessibility on, I am going to include a link list for further resources to find more information on forms from. This is about showing the simple skeleton first. Carrying on that idea you may have some of the following in your CSS code:


form{ color: #333333; }
input{ color: #CCCCCC; background-color: #000000; }
fieldset{ border: 1px solid #FFFFFF; }


You can call any form element and give it a style just as you would use the img element in styling an image using CSS. The styling of the form is what can really make the difference between a yawn form, form shocker or form star. There are so many different ways you can play with the simple structure to create pleasing forms that validate and also are more accessible. Forms need be far from boring with just a little CSS and formatting. From this basic understanding of the forms you can implement further techniques outlined in some useful resources:

• Web standards : Accessible forms for beginners
• The man in blue : Styling form widgets
• A plus moments : Styling form fields
• Bite size standards : Using size to size inputs

If you know how to do forms this way then how about sharing here some styling tips for us all. The html tags will be stripped but you can write CSS for us to see any styles. Be great to see some ideas people have for nice ways to style forms. I am going to compile some bits from around the web and do some myself for a later post and will include any suggestions in that if you want. So, let’s makeover those forms and bring a little love in their life.