Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

FP2000: How to Dynamically Change Form Element Background Colors


View products that this article applies to.

This article was previously published under Q278386

↑ Back to the top


Summary

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.

↑ Back to the top


More information

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.
<HTML>
<HEAD>
<TITLE>TEST Page 1</TITLE>
</HEAD>
<BODY onLoad="document.all.NAME.focus()">
<FORM method=post>
<table border="0">
  <tr>
    <td align="left">Name</td>
    <td>
      <INPUT name="NAME"
        onblur="this.style.backgroundColor='#ffffff'"
        onfocus="this.style.backgroundColor='#ffff00'">
    </td>
  </tr>
  <tr>
    <td align="left">Address</td>
    <td>
      <TEXTAREA name="ADDRESS"
        onblur="this.style.backgroundColor='#ffffff'"
        onfocus="this.style.backgroundColor='#ffff00'"></TEXTAREA>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <INPUT type="submit" value="Submit"
        onblur="this.style.backgroundColor='#cccccc'"
        onfocus="this.style.backgroundColor='#ffff00'">
      <INPUT type="reset" value="Reset"
        onblur="this.style.backgroundColor='#cccccc'"
        onfocus="this.style.backgroundColor='#ffff00'">
    </td>
  </tr>
</table>
</FORM>
</BODY>
</HTML>
				

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.
<HTML>
<HEAD>
<TITLE>TEST Page 2</TITLE>
<STYLE>
.normal { background-color: #cccccc; color: #000000; }
.focus  { background-color: #ffff00; color: #000000; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function toggleColor(objElement)
{
  if (objElement.className=='normal')
    objElement.className='focus';
  else
    objElement.className='normal';
}
</SCRIPT>
</HEAD>
<BODY onLoad="document.all.NAME.focus()">
<FORM method=post>
<table border="0">
  <tr>
    <td align="left">Name</td>
    <td>
      <INPUT name="NAME"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
    </td>
  </tr>
  <tr>
    <td align="left">Address</td>
    <td>
      <TEXTAREA name="ADDRESS"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)"></TEXTAREA>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <INPUT type="submit" value="Submit"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
      <INPUT type="reset" value="Reset"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
    </td>
  </tr>
</table>
</FORM>
</BODY>
</HTML>
				

↑ Back to the top


References

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:
219075� FP2000: Custom Styles Applied to Form Fields Are Not Displayed in Normal View
219704� FP2000: Form Elements Do Not Display Styles in Normal View

↑ Back to the top


Keywords: KB278386, kbinfo

↑ Back to the top

Article Info
Article ID : 278386
Revision : 4
Created on : 7/4/2007
Published on : 7/4/2007
Exists online : False
Views : 328