Home arrow HTML arrow Page 2 - DHTML Form Enhancement
HTML

DHTML Form Enhancement


There are few tools to speed up form development. This article illustrates simple ways to provide some basic enhancements to your web application's forms such as validation, automatic submission, and hilighting of the field in focus.

Author Info:
By: David Fells
Rating: 4 stars4 stars4 stars4 stars4 stars / 40
June 21, 2004
TABLE OF CONTENTS:
  1. · DHTML Form Enhancement
  2. · Visual Appeal
  3. · Extensible Validation
  4. · Regex Validation and Equality Checking
  5. · Extending the validate function

print this article
SEARCH DEVARTICLES

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 = "";
  }
 }


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials