Form Enhancement Primer
Simple tips to improve your forms

One of the least gratifying items to create in HTML are form elements. Forms are generally bulky, unsightly and play havoc with our carefully designed page layout. Forms are like the rogue child that simply will not behave normally in any situation. Text fields especially are almost universally inconsistent in the way they are handled by every single browser.

What to do? Well there are some simple things you can do to make your forms easier on the eyes and behave a bit in different browsers. Also, you can take control of some form elements using some simple javascript to make your forms validate or present options.

So let's get started. The first thing that we want to do is set up the form so that it looks a little better. We can do this by appying CSS (Cascading Style Sheets) to our form elements. Not all styles work the same on every form element on every browser but it mainly helps spruce up text fields and buttons. CSS does not currently affect radio buttons.

Examples
Here is a simple text field without any type of style applied. It is 25 characters wide and renders differently across different browsers. Now if we take the same text field and apply a style we get this which is a minor improvement on the original text field.

We can also take this one step further by adding some color to the text-field. This is all done with CSS. Here's the code that makes it work:

<style type="text/css">
<!--
.textfield1 {
	font-family: Tahoma, Verdana, 
Arial, Helvetica, sans-serif;
	font-size: 10px;
	border: 1px solid;
}
.textfield2 {
	font-family: Tahoma, Verdana, 
Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	background-color: #3366FF;
	border: 1px dotted #0000FF;
	font-weight: bold;
}
-->
</style>

This can also be applied to drop down menues Sample1 Sample2 Sample3 but not very effictively to check boxes and radio buttons . Also, not all browsers support styles applied to forms in the same manner so test it in different browsers. For example, Netscape 6 does disply styles in check boxes and radio buttons while not supporting the colored arrow in the drop down menu.

There is also the submit button

Advanced techniques
To further improve your forms try some simple JavaScript. To fill a text field with some example text that will disappear when clicked try this code:

<input type="text" name="name" value="Your 
  name here." size="16" onfocus="if(this.value=='Your 
  name here.')this.value='';" onblur="if(this.value=='
')this.value='Your 
  name here.';" class="textfield1" style="width:150px; 
  height:18px" />

Notice how the text within the text field disappears when you click it and then reappears when you click elsewhere (unless you do actually type something within the text field).

This feature is handy when you want to give an example of what should go within a search field or log-in or something.

More Advanced techniques
Form validation is something else that can greatly improve a form. For example, if you want to be sure that someone has actually entered a real zip code or "legitimate" e-mail address instead of just random numbers or letters you can use JavaScript to accomplish this task. Granted a bogus number can still be entered but at least you have installed some level of validation.

Here's how it can be done:

This is merely an example of some basic JavaScript form validation. If you want to use more I suggest you get a good JavaScript book or check a more complete online tutorial. However, putting JavaScript to work in your forms will increase their value and overall presentation.

Here is an example of a nicely styled form:

If any of this is at all confusing to you then simply view the source of this page for a clearer understanding of exactly what is being done. The main purpose of this article is to cause you to at least think about making some simple and easy improvements to your forms so that they are at least a bit easier to look at.

///