DHTML Form Enhancement - Visual Appeal

(Page 2 of 5 )

Visual appeal is important in any web application. Typically, web applications are left with sparse and unappealing appearances that leave users in an uncomfortable environment. In the Windows XP and OSX era, users are accustomed to seeing eye candy everywhere. Most notably, users are accustomed to seeing visual clues as to what area of a page they are working in. What is the most common enhancement here? Hilighting. By simply adding a call to the following function in our body tag's onload handler, we can automatically enable all our page's form fields with a hilight effect.

 function prepFormFields() {
  var htmlElements = Array('select', 'input', 'textarea');
  var htmlTempArray;
  for (var i = 0; i < htmlElements.length; i++) {
   htmlTempArray = document.getElementsByTagName(htmlElements[i]);
   for (var j = 0; j < htmlTempArray.length; j++) {
    htmlTempArray[j].onmouseover = htmlTempArray[j].onfocus = function() {
     this.className = "selected";
    }
    htmlTempArray[j].onmouseout = htmlTempArray[j].onblur = function() {
     this.className = ""';
    }
   }
  }
 } 

This function simply retrieves all select, input, and textarea elements and attaches the handlers required for a clean hilight effect. We will need to create a class called "selected" for our form fields to utilize with this effect. This style would consist of a different background color than our default form field style and possibly a different text color to enhance the hilight effect. We could extend this function to look for an attribute such as 'hilight="true"' or 'hilight="className"'. I have not found a reason to do this as of yet because I have yet to deal with a web application that had form elements on a single page that did not share the same basic stylings.

We could go even further and have this function display an image of some sort… perhaps an arrow next to the active form field. This could be achieved using a CSS style such as this one:

.activeElement {
 background-position: center right;
 background-image: url("images/arrow.gif");  /* Replace with your image of choice */
 padding-right: 20px;    /* Allow enough padding to encapsulate the image */
}

We will create an HTML attribute to indicate which fields use this effect and insert it into our form fields where we want to use them by using the above example of 'hilight="className"'. Any element with this attribute will use that class rather than the default class 'selected'. Now we can modify the inner for loop of the prepFormFields function with the following code:

 for (var j = 0; j < htmlTempArray.length; j++) {
  if (this.getAttribute("hilight")) {
   htmlTempArray[j].onmouseover = htmlTempArray[j].onfocus = function() {
    this.className = this.getAttribute("hilight");
   }
  }
  else { 
   htmlTempArray[j].onmouseover = htmlTempArray[j].onfocus = function() {
    this.className = "selected";
   }
  }
  htmlTempArray[j].onmouseout = htmlTempArray[j].onblur = function() {
   this.className = "";
  }
 }

Next: Extensible Validation >>
 

More HTML Articles
More By David Fells

Comments On: DHTML Form Enhancement

>>> Be the FIRST to comment on this article!