FP2000: How to Dynamically Change Form Element Background Colors

This article describes how to use the Dynamic Hypertext Markup Language (DHTML) onFocus() and onBlur() events and cascading style sheets to cause the background color of form elements on a Web page to change when a user is using the form elements.

NOTE: This article uses custom DHTML and cascading style sheets (CSS) that may not be available in all browsers. For more information, click Microsoft FrontPage Help on the Help menu, type "compatibility" in the Answer Wizard, and then click Search to view the topics returned.

Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. NOTE: You may receive an error message if you copy the examples directly from this article and paste them into FrontPage. The angle brackets (< and >) may appear as escaped HTML code (< and >). To work around this behavior, paste the script into a blank Notepad document, and then copy it from Notepad before you paste it into FrontPage. Some of the most commonly used form elements in HTML are buttons and text boxes. The following code samples demonstrate how to change the background color of those form elements by using the onFocus() and onBlur() events to indicate which form element is currently in use on the page. Each sample should be entered using the HTML view in FrontPage 2000.

This first code sample is a more straightforward approach than the second sample in this article, but the first sample requires adding more code to each form element and makes customization or later changes more difficult.

The sample shows an HTML form inside a table with the following elements:

• One text box
• One scrolling text box
• Two buttons

Each element has the onFocus() and onBlur() events that are defined by using inline script to change the background color by using the syntax "this.style.backgroundColor='COLOR'". As a Web client user browses the page and uses the TAB key to move between form elements, the background color of the form field changes to yellow to indicate that the form element is in use, or back to white/gray when the form element is not in use.

This code sample is more elaborate than the first sample, but it allows easier customization and changes.

The following sample uses the same form as earlier, with the following changes:

• A STYLE section is added to define classes that are used to change colors.
• A SCRIPT function is added to turn on and off the colors for form elements.
• The form elements now call the script function for the onFocus() and onBlur() events and also use a style-sheet class to define the original colors.

The main advantage of this approach is that only the STYLE section must be changed to alter the color scheme for the entire form, instead of changing every form element manually. Therefore, in this sample, each form element has a base CSS class that is defined with "class". Then the onFocus() and onBlur() events call a DHTML function called "toggleColor()" to change the CSS class when the form element receives focus in the browser.

For more information about scripting topics, please browse to the following Microsoft Web sites:

MSDN Online: The Microsoft Developer Network Web SiteFor additional information about custom styles and form fields, click the article numbers below to view the articles in the Microsoft Knowledge Base: