object.style.backgroundColor = colorValue;

The value of colorValue can be any color value. The backgroundColor property is supported by Navigator 4 and Internet Explorer 4 (and above). However, it cannot be associated with form elements in Netscape Navigator. Therefore, our form validation script works with both browsers, but only colors the invalid text fields in Internet Explorer:

<SCRIPT LANGUAGE="JavaScript">
<!--

function setColor(el, bg) {
  if (el.style) el.style.backgroundColor = bg;
}

function checkInput(form) {
  var bgBad = "#cccc99";
  var bgGood = "white";
  var valid = true;
  if (form.first.value == "") {
    valid = false;
    setColor(form.first, bgBad);
  } else {
    setColor(form.first, bgGood);
  }
  if (form.last.value == "") {
    valid = false;
    setColor(form.last, bgBad);
  } else {
    setColor(form.last, bgGood);
  }
  if (!valid) alert("Please fill out the entire form.");
  return valid;
}

// -->
</SCRIPT>
<FORM onSubmit="return checkInput(this)">
First name: <INPUT TYPE="text" NAME="first" SIZE="30" VALUE=""><BR>
Last name: <INPUT TYPE="text" NAME="last" SIZE="30" VALUE=""><BR>
<INPUT TYPE="submit" VALUE="send">
</FORM>

If you're using Internet Explorer 4 (or above), give it a try:

People who read this tip also read these tips:

• Resolving Conflicting Styles
• Reflowing a Page
• Updating Existing Text
• Setting the Background Color
• Zooming In and Out of Elements