Freeservers Member Newsletter

Member Newsletter

BUILD YOUR SITE

Advanced: Building Attractive Forms

Forms (and form buttons) tend to look the same just about everywhere on the Internet. But they don't have to. Using Cascading Style Sheets (CSS) and JavaScript, you can breathe new life into old forms.

Table of Contents

Client side technologies
Example using CSS
Extending CSS with JavaScript

Client side technologies

There are two areas of focus that apply when implementing the "attractive form". The first area is CSS, which exposes the properties of individual page elements such as <BODY>, <TABLE>, <FORM>, <INPUT>, <SELECT> and <TEXTAREA> as well as many more. By accessing these properties through the <STYLE> mechanism you can dramatically alter how your form's look from the outset.

The second area of focus involves using a scripting language which can detect and respond to events. This example uses JavaScript but it is possible to use VBScript instead if you want to. This also uses a browser which not only supports the scripting language you choose but also supports dynamic re-flow of content. (This means the ability to redraw parts of an HTML page WITHOUT having to load another copy from the web server.)

Developing for a standard browser will produce examples that are really interesting under good circumstances but that still function to a minimal standard under less than ideal circumstances.

Example using CSS

Here is an example of a form. When viewed with Internet Explorer 5.0 or higher the form controls will appear with background color attributes, and font face and size settings which will be honored by the browser. If on the other hand you are using any variant of Netscape 4 some of those settings will be honored and some simply ignored -BUT- the example will still function and a form will appear.

This form was created with the following code:

<STYLE>
.mitable,.mitext,.mibutton,.miselect{
font-family: verdana, arial, sans-serif;
font-size: 5mm;
font-weight: bold;
color: ddddaa;
background-color: 559911;
}
</STYLE>

(which was placed between the <HEAD> and </HEAD> tags.)

<FORM NAME="myform1">
<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=0 WIDTH=100% CLASS="mitable">
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=left WIDTH=50% CLASS="mitable">Name:</TD>
<TD ALIGN=left WIDTH=50% CLASS="mitable"><INPUT TYPE="text" CLASS="mitext" SIZE=13></TD>
</TR>
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=left CLASS="mitable">Favorite Color:</TD>
<TD ALIGN=left CLASS="mitable">
<SELECT CLASS="miselect">
<OPTION CLASS="miselect">blue</OPTION>
<OPTION CLASS="miselect">green</OPTION>
<OPTION CLASS="miselect">----------------</OPTION>
</SELECT>
</TD>
</TR>
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=center COLSPAN=2 CLASS="mitable"><BR><INPUT TYPE="button" CLASS="mibutton" VALUE=" Finished "><BR><BR></TD>
</TR>
</TABLE>
</FORM>

(this section was placed as a normal form somewhere between the <BODY> and </BODY> tags.)

The way that styles are specifically applied to an HTML element is through the inclusion of a CLASS="classname" statement. For example by declaring <INPUT TYPE="TEXT" CLASS="mitext"> a DHTML capable browser will cause the INPUT control created by the statement to be displayed with the properties specified in the section that defines .mitext (which in this case can be seen above in the <STYLE> section.)

Extending CSS with JavaScript

Creating a form whose visual properties have been established through a style (CSS) and through the DHTML capabilities of a browser satisfies the first part of our focus on creating a beautiful form. The second part involves manipulating the properties when certain events occur. In the continuation of the example we will use the mouseover and mouseout events which were introduced in previous issues of the newsletter. Click here to view previous issues.

As mentioned earlier, this example uses JavaScript to capture events and to alter the properties of the HTML elements which we enhanced earlier with CSS. There are other scripting languages in addition to JavaScript which could be used for the same purposes but JavaScript is probably the most widely in use at this time and as such it enjoys wide support by browser makers.

We'll capture the events we want to respond to by including the script commands needed to recognize the event, within the properties of the specific HTML elements we want to capture. Building on the example of the form presented above makes this process simple and illustrates an easy method of developing this type of form. In other words, you create the form first then include dynamic functionality after the form is working. In this case we simply add event detectors which call functions and add the code for those functions.

Here is the improved form with event detection added. The same behaviors that applied to CSS will apply here. If a browser is capable of performing the behaviors we have specified then you will see the results in this example. Specifically Internet Explorer 5.0 or higher will change the colors of individual HTML elements in response to the mouse being moved over a control or being moved off of a control. If the browser can't perform these functions then it will simply ignore them. If you are using any variant of Netscape 4, the form will appear exactly as it did in the previous example, but because Netscape 4 can't perform some of the behaviors it will simply ignore them and nothing will happen.

This form was created with the following code:

<STYLE>
.mitable,.mitext,.mibutton,.miselect{
font-family: verdana, arial, sans-serif;
font-size: 5mm;
font-weight: bold;
color: ddddaa;
background-color: 559911;
}
</STYLE>

(the STYLE part is exactly the same as the first example.)

<FORM NAME="myform2">
<TABLE BORDER=1 CELLPADDING=3 CELLSPACING=0 WIDTH=100% CLASS="mitable">
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=left WIDTH=50% CLASS="mitable" ID="miname" onMouseover="mmover(this)" onMouseout="mmout(this)">Name:</TD>
<TD ALIGN=left WIDTH=50% CLASS="mitable"><INPUT TYPE="text" NAME="miname" CLASS="mitext" SIZE=13 onMouseover="mmover(this)" onMouseout="mmout(this)"></TD>
</TR>
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=left CLASS="mitable" ID="mifavparent">Favorite Color:</TD>
<TD ALIGN=left CLASS="mitable">
<SELECT NAME="mifavcol" CLASS="miselect" onMouseover="mmover(mifavparent)" onMouseout="mmout(mifavparent)">
<OPTION CLASS="miselect">blue</OPTION>
<OPTION CLASS="miselect">green</OPTION>
<OPTION CLASS="miselect">----------------</OPTION>
</SELECT>
</TD>
</TR>
<TR VALIGN=top CLASS="mitable">
<TD ALIGN=center COLSPAN=2 CLASS="mitable"><BR><INPUT TYPE="button" NAME="mifinished" CLASS="mibutton" VALUE=" Finished " onMouseover="mmover(this)" onMouseout="mmout(this)"><BR><BR></TD>
</TR>
</TABLE>
</FORM><BR><BR>

<SCRIPT language="JavaScript"></SCRIPT>

This section differs from the first example slightly. In order to respond to the events we wanted to capture we've added the following things to the original example.

1. The properties onMouseover and onMouseout have been added to any HTML element that will respond to either mouse related event.

2. A SCRIPT section has been added which contains some variables which are used to store existing values and to replace existing values temporarily.

**The reason the values are declared immediately inside of the SCRIPT section (instead of inside of each function that follows) is because we want anything in that SCRIPT section to have access to these variables and had we declared them inside of functions they should only exist inside the function where the value is contained.

3. Functions were created within the SCRIPT section. The functions are called from the onMouseover and onMouseout properties within the HTML FORM.

**In order to make the functions more reusable we are passing the object we want to work with -TO- the function at the time it is called. Note: If you are confused by the idea of "passing" something to a function and even functions in general don't feel bad, this is a topic that confuses many people. A function is like a variable, only instead of storing a value, it stores a behavior. When you want a behavior to happen more than once or for more than one thing then you create it as a function. That function then needs to know WHAT it is supposed to work with. In our example we are changing properties of HTML elements, so we simply pass our specific element to the function, then the function can operate "on whatever it is passed". In our example we are passing either a NAME of an object (for example "mifavparent" which is the name of another element) or the magic word "this" which is simply the element from which the function call is being made.) Experimenting with the example is an excellent way to get a deeper understanding of this process.

Back to Build Your Site
Back to Table of Contents

Get great deals from the
Internet via E-mail
CLICK HERE