If you are a serious web developer, chances are you have already used forms before and you most likely rely on them for a lot of things. For example - the search and poll features of my sidebar are examples of forms. If you have used them before and you haven’t added any styling to them, they can look, well, rather boring. Some advantages of adding CSS to your forms in HTML are:

• The forms will comply with the general site theme
• The inputs won’t stick out and catch un-necessary attention from your page viewers
• Or (the opposite to above) you can use styling on your forms to attract attention from viewers on forms that you want to promote
• Styling your forms also makes your site look more professional as opposed to being ‘amateur’ and having standard forms

The coding:

A standard form looks like this in HTML:

<form action="#"> <label for="name">Name</label> <input id="name" type="text" />
<label for="e-mail">E-mail</label> <input id="e-mail" type="text" />
<p class="submit"><input type="submit" value="Submit" /></p>
</form>

If you load that up into a file and test for yourself you will see that it looks horrible! The first thing that should be noted is that the boxes and text are not aligned properly and they both start at different points. This immediately looks quite bad and really doesn’t look good at all. In order to fix this up we need to position the boxes and the whole form to fit together nicely.

label
{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}

.submit input
{
margin-left: 4.5em;
}

Using the above CSS definitions we can now really begin to modify our form. In the code above the label attribute has been given a fixed with in terms of em (this allows for further font size editing later on). If you have any larger words, then this setting should of course be edited.

Using the margin-right setting, we have given the words and the input boxes a little bit of area between each other so they are not all cramped up together.

Lastly, the submit button has also been given a margin to align nicely with the above boxes. The whole form and spacing should now be all setup and aligned properly. We have now created a nicer form, but its basically the same and still rather boring. In order for the form to fit in with the page and theme we must commit some colors and font changes.

The main three attributes we will be focusing upon are the border, background and color (font). However you are not at all limited to this set and instead encouraged to use other attributes in order to add your own uniqueness to your forms.

<code> input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}</code>

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}

The above CSS coding basically just added in all of the backgrounds, borders and font coloring that we need in order to jazz up our form. The code above is pretty much all self-explanatory except for one thing. You should note that the outset property has been set on the border for the submit button. This basically allows the button to remain looking like a button. If we used solid instead the button would look flat and not very nice at all.

Another note about the above, is that you should be careful with backgrounds. More and more Internet users are using the Google Toolbar9 which fills in online forms for you. Whenever a form appears it automatically turns the background colour of input boxes to yellow - if you’ve specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they’re writing when completing the form.

If you have made the above changes but see no effects on the submit button, then it is probable that you browser doesn’t support re-styling of buttons. This is particularly seen on the Mac OS.

Conclusion:

Now that you know how to re-arrange and style those HTML forms on your site, there is no excuse to use the standard layout. Publishing web sites and maintaining those sites is all about customer care and experience. You want your site to look as appealing as possible in order to attract more and more customers. This article only briefly touches styling those HTML forms that you use and is only meant to serve as a inspirational article.

Have any good ideas or nice styling effects for HTML forms? Let’s hear them in the comments!

• Basics to advanced: CSS Tips and Tricks
• Apple Style Menu Tutorial Using CSS Sprites
• Table based or table-less designing?