Tutorial 5 - Forms & DHTML

Tutorial 4 - Working with Forms - Tutorial 6 - DOM and DHTML

Dynamic HTML (DHTML) is a collection of strategies (scripting, CSS and DOM) that lets you create web pages that are more interactive, responsive and animated than ever before. This tutorial emphasizes working with forms for interaction and older methods (aka DOM level 0) of dynamically modifying web pages. DOM and DHTML will explain the DOM level 1 model as well as ways to really liven up your site. You should already be familiar with JavaScripting and HTML forms (refer to Quick Forms) before starting this tutorial.

Browser/Object Explorer Tool

This example displays all the properties that a specific browser agent contains in its navigator object. Note that many of the properties are not available on older browsers but it is worth while checking for yourself. You must run this example using each of the browsers that you want to check out.

The technique uses a for/in loop which works a bit differently than the usual for loop that we have been using for string scanning. Instead of incrementing a counter, For/in loops increment their way through the named object's properties. In this case the named object was navigator which indicates the browser. But you could have used other objects such as window or Math. Those who enjoy finding every property implemented can have fun by grabbing the next chunk of code and changing the name navigator to another object name. What client object properties are not available in Opera 7? That is easy to find out. A bit harder is to find out if MSIE is missing one of the core object properties. But a bit of testing and saving screen shots will solve these problems.


function explore_it() {
browser="browser info:\n";
for (propname in navigator) {
    browser += propname+": "+navigator[propname]+"\n";
    }
alert(browser);
}

DOM Level 0 Objects

The original document object had properties that could be read using script and some could also be set. The window.screen object also provided useful readable properties. Refer to client objects for specific properties. Since DOM level 0 has been superceded by DOM level 1, we will only explore setting bgColor. Some examples of DOM level 1 access are:

textColor = document.fgcolor;
document.bgColor = 'thistle';
colors = screen.colorDepth; // note windows. omitted as redundant!

New Background Color Function

The form examples shown on this page all use a common function called newColor to set the desired body background color. On this tutorial page only the left and right margins will change color as an overlay retints most of the page. newColor accepts X11 named colours, hexadecimal 3 and 6 character formats preceded by a # and rgb format [eg. rgb(50,100,200)] entries. Because of browser differences, a sniffer is required inside the newColor function. Note: The rgb format is unknown to Netscape 4. An improved version of newColor that tints any element is presented in a later tutorial.

function newColor(entry) {
/* Note: sniffer must id older Netscape */
if (document.body) { // its DOM!!
   document.body.style.backgroundColor=entry;
   } else {
   if (entry.indexOf('rgb')!=-1) {return;} // trap NS4 lack of knowledge
   document.bgColor=entry;
   }
}

Select List Color Picker

This example shows the use of a selection list to pick a color from the X11 named colors. The onChange event uses the form name explicitly to get a value to feed the newColor function. newColor sniffs for the browser type and changes a style property dynamically.

Background Color Selection from X11 List

The color selection form in HTML

<form action="">
<fieldset><legend>Background Color Selection from X11 List</legend>
<select id="c_sel" size="6"
onChange="selColor('c_sel');">
<option>aliceblue</option>
<option>antiquewhite</option>
...
</select></fieldset></div>

Radio Button Color Selector

This example shows the use of a 'controlled' input to choose from a 'restricted' set of color backgrounds. The onclick event feeds the selected color value to the newColor function.

<form id="radio_form" action="" method="get">
<fieldset><legend>Background Color Selector</legend>
<label>Aquamarine:<input name="radCol" type="radio"
onclick="newColor('Aquamarine')" /></label>
<label>Burlywood:<input name="radCol" type="radio"
onclick="newColor('Burlywood')" /></label>
<label>Floralwhite:<input name="radCol" type="radio"
onclick="newColor('Floralwhite')" /></label><br>
<label>Goldenrod:<input name="radCol" type="radio"
onclick="newColor('Goldenrod')" /></label>
<label>Peachpuff:<input name="radCol" type="radio"
onclick="newColor('Peachpuff')" /></label>
<label>White:<input name="radCol" type="radio"
checked="checked" onclick=newColor"('White')" /></label>
</fieldset></form>

Hexadecimal Entry Color Picker

This example lets the user enter a 6 digit hex code and test the color choice before using it on a web page. This example also includes verification that the input was a valid hexcode before using it to prepare the new background color. Validation should always be performed on any free format input. numeric validation discusses some methods of input validation.

<form id="formhex" action="" method="get" onsubmit="return false;">
<fieldset><legend>Free Format Color Selector</legend>
<label for="query">Background color (6 hexadigits):
<input id="query" type="text" size="8" maxlength="6"></label>
<input type="button" value="Test!" onclick="ChangeColor('query');"></form>

And the validation script is:

function ChangeColor(id) {
el=getElementById(id);entry=el.value;
entry=entry.toUpperCase();strlen=entry.length;
// Note: input must be validated
validChar='0123456789ABCDEF';
if (strlen!=6) {
    alert("Entry must be EXACTLY 6 characters long");
    return false;
    }
// Check for legal characters in string
for (i=0;i<6;i++ ) {
    if (validChar.indexOf(entry.charAt(i))<0) {
       alert("Entry must be in RRGGBB hexcode format!");
       return false;}
    }
if (entry.charAt(0) || "#" ) {entry="#"+entry;}
newColor(entry);
return true;
}

Demo: Extreme Color Picker

The Extreme color picker combines many of the ideas from the above examples. Cut and paste it to your site or use it from here. Have fun!

Tutorial 4 - Working with Forms - Tutorial 6 - DOM and DHTML