Dhtml

Form Controls

Shortcuts

Overview

This tutorial shows you how to set of form controls so that the user can select elements of the page to modify.

Part 1

Form controls are a basic element of HTML coding. DHTML allows you to extend the usefulness of these controls so that they may change elements on a page.

Below is an example of the HTML code for a form. Notice that this form has no "action" attribute, it instead just has an id. The tags inside the form represent various kinds of inputs -- text, password, hidden, radio button, check box and option list, as well as the submit, reset and image submit buttons.

<FORM id="sampleForm">

<P>
Username: 
<INPUT type="text" name="userName" value="bobWobbly" size="15"><BR>
Password: 
<INPUT type="password" name="password" value="chuckaKhan" size="15">
</P>

<P>
Sex:<BR>
<INPUT type="radio" name="sex" value="m"> Male<BR>
<INPUT type="radio" name="sex" value="f"> Female<BR>
</P>

<P>
<INPUT type="checkbox" name="iceCream" checked>
Check the box if you like ice-cream.
</P>

<P>
Choose your favourite colour: 
<SELECT name="colours">
<OPTION value="red" selected>Red
<OPTION value="orange">Orange
<OPTION value="yellow">Yellow
<OPTION value="green">Green
<OPTION value="blue">Blue
<OPTION value="violet">Violet
</SELECT>
</P>

<P>
<INPUT type="submit" value="Send Information">
<INPUT type="reset" value="Clear Information">
</P>

<P>
<INPUT type="image" border="0" src="../images/smiley.gif">
</P>

</FORM>

This is how the form would look on an HTML page.

Part 2

To use the information in the form, the DOM includes objects for accessing the attributes of the form and its inputs. More detail is given in the JavaScript Alphabetical Reference, but for now you may refer to the code below for an example of accessing and changing controls using JavaScript.

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

function changeBackground(color)
   /*
   ** changeBackground(color) changes the document background
   ** colour to the colour selected in the form.
   */
   {
      if (color != "none") {
         if (ns4) {
            document.bgcolor = color;
         } else if (ie4) {
            document.body.style.backgroundColor = color;
         }
      }
   }

// -->
</SCRIPT>

<FORM id="backgroundColourChanger">
<SELECT name="colours" 
   onChange="changeBackground(this.options[this.selectedIndex].value)">
<OPTION value="none" selected>Choose a colour
<OPTION value="red">Red
<OPTION value="orange">Orange
<OPTION value="yellow">Yellow
<OPTION value="green">Green
<OPTION value="blue">Blue
<OPTION value="violet">Violet
</SELECT>
</FORM>

This is how the code would look on the HTML page:

Part 3

Below is the code for a demonstration of DHTML form controls. Select the weather in the option list in the demonstration to change the weather for Brisbane.

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

var layerShowing = "none";
   /*
   ** layerShowing is the layer that is currently showing, or
   ** "none".
   */

function changeWeather(choice)
   /*
   ** changeWeather(choice) changes the weather of Brisbane
   ** to the value selected by the user.
   */
   {
      var layerToShow;

      if (layerShowing != "none") {
         hideLayer(layerShowing);
      }

      if (choice == "none") {
         layerToShow = "none";
      } else if (choice == "sun") {
         layerToShow = "sunLayer";
      } else if (choice == "storm") {
         layerToShow = "stormLayer";
      }

      if (choice != "none") {
         showLayer(layerToShow);
      }

      layerShowing=layerToShow;
   }

function showLayer(layerName)
   /*
   ** showLayer(layerName) makes layerName visible.
   */
   {
      eval(layerRef + '["' + layerName + '"]' + styleRef + 
           '.visibility="visible"');
   }

function hideLayer(layerName)
   /*
   ** hideLayer(layerName) makes layerName hidden.
   */
   {
      eval(layerRef + '["' + layerName + '"]' + styleRef + 
           '.visibility="hidden"');
   }

// -->
</SCRIPT>
</head>

<body onLoad=init()>

<FORM id="weatherChanger">

<P>
Select the weather for Brisbane:
<SELECT name="Brisbane" 
   onChange="changeWeather(this.options[this.selectedIndex].value);">
<OPTION value="none" selected>Unknown
<OPTION value="sun">Sunny
<OPTION value="storm">Stormy
</SELECT>
</P>

</FORM>

<DIV id="australiaLayer" style="position: relative; top: 10; left: 60; 
   z-index: 2; width: 200;">
<IMG src="../images/australia.gif">
</DIV>

<DIV id="sunLayer" style="position: relative; top: -200; left: 320; 
   z-index: 3; width: 100; visibility: hidden;">
<IMG src="../images/sun.gif" width="60" height="60">
</DIV>

<DIV id="stormLayer" style="position: relative; top: -260; left: 320; 
   z-index: 4; width: 100; visibility: hidden;">
<IMG src="../images/storm.gif" width="60" height="60">
</DIV>

Previous Tutorial
Go back
Next Tutorial

Author: Scott Brady
Date Created: 4 May 99
Last Updated: