Using Event Handlers

An event handler is code added to an HTML tag that is run whenever a particular event occurs. The syntax for invoking an event handler is:

<HTML_tag Properties event_handler ="JavaScript commands;">

where HTML_tag is the name of the tag, Properties are properties associated with the tag, event_handler is the name of an event handler, and JavaScript commands are the set of commands or, more often, a single command that calls a JavaScript function to be run when the event occurs.

You want to add a command that will allow participants to choose the color of the background of the form by clicking on a color. The default color for the form will be teal.

Return to your text editor with the contestform.html file open. Edit your <BODY> tag to read:


Under the <FORM NAME=CON> insert the following Javascript:

<P>Change background color to:</P>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='red';">Red<BR>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='blue';">Blue<BR>
<INPUT TYPE=RADIO NAME=COLORS onClick="document.bgColor='green';">Green

Save your changes and view the form in your Web browser. The forms background should be teal. Click on the radio buttons of the color to see if the form's background changes color. Cool huh!

You now want to include the current date on the form when the form is open. This is known as the onLoad command.