JavaScript Tip:
Create Dynamic Form Fields

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Cascading Style Sheets (CSS) specifications combined with JavaScript events give you a great opportunity to create forms that look good and are easy to understand. Instead of boring, black and white forms, you can create forms that respond instantly to user inputs.

Creating Dynamic Effects

Some visitors may have problems navigating through a long or complex form. Help them out by creating form fields that change color as the visitor navigates through the form.

This adds interactivity to your form: visitors can immediately see where they've been and where they are now. You're also increasing the accessibility and usability of the form for visitors with cognitive disabilities - or for anyone who briefly looks away from the page and then tries to find their place again on the form!

In the previous example, we defined style specifications for white text on a navy background. Here, let's create two style specifications that change the look of the form element depending on visitors' actions.

<style>
.changedField
{
color:white;
background: navy;
}
.currentField
{
color:white;
background:red;
}
</style>

Then, inside the individual form elements, you'll have to refer to these classes using the onFocus and onChange JavaScript events, like this:

<form>
First Name: <input type="text" size="10" name="Fname" onFocus="this.className='currentField'" onChange="this.className='changedField'"><br>
Last Name: <input type="text" size="20" name="Lname" onFocus="this.className='currentField'" onChange="this.className='changedField'"><br>
<br>
</form>

The onFocus event fires when the visitor's cursor is actually on the form field. The onChange event fires when the visitor begins to input data in the field.

Here's an example form. Tab through it and type information to see it in action.

We omitted the Submit and Reset buttons because this isn't a fully-functioning form.

Browser Compatibility Issues

Did you see the styles at work in the example form? You may have missed them if you're using WebTV, an older browser (Netscape 4.7 has a lot of problems with CSS), have JavaScript turned off in your browser, or you're using the Opera browser. In those cases, you see a plain form in black and white.

Note: Opera's Web site states that Opera doesn't support styles for form controls, but does offer the reassurance that "We still plan to support it one day." Feel free to use styles inside your forms, even if you have a large pool of visitors using Opera. They may soon see the same colorful form that other visitors do.

Not all CSS and/or JavaScript techniques degrade so gracefully. Never use them as the sole means to convey important information to visitors. Unless you're able to test your page in virtually every browser and operating system combination, you'll never know if the form is displaying correctly.

If you use Browser Photo to test your page, you'll know how it looks in the most popular 16 different browser and operating system combinations (including WebTV). It's a quick, easy, and cost-effective way to see your page like your visitors do.

In this instance, we've used the CSS and JavaScript to make the form more attractive. Visitors with cognitive disabilities will appreciate your efforts to help them navigate through the form. Other visitors who see the effects may appreciate your efforts to enhance their user experience. But visitors whose browsers don't support it can use the form and won't know the difference.

Dynamic form elements add a good interactive feel to your form, but always test them to be sure that you aren't inadvertently breaking the form you're trying to enhance!