This example shows how buttons can be used to interact with the browser. Click here to see the example.

Here is the source code:

<HTML>
<HEAD>
</HEAD>
<BODY>
This page contains a form with many buttons.
<BR>
<BR>
Press the buttons and see what happens!
<P>
<FORM>
<INPUT TYPE="button" VALUE="Red" onClick="document.bgColor='red';">
<P>
<INPUT TYPE="button" VALUE="Green" onClick="document.bgColor='green';">
<P>
<INPUT TYPE="button" VALUE="Yellow" onClick="document.bgColor='yellow';">
<P>
<INPUT TYPE="button" VALUE="Blue" onClick="document.bgColor='blue';">
</FORM>
</BODY>
</HTML>

The buttons all have very similar code. The button labeled "Red" has the code

<INPUT TYPE="button" VALUE="Red" onClick="document.bgColor='red';">

The VALUE attribute is used to provide an appropriate label for the button. onClick is used to interact with the browser and direct what should happen when the button is clicked. In this case, we say

onClick="document.bgColor='red';"

which means that when the button is clicked, the background color of the whole document should be set to red.

The label on the button is not used by the JavaScript code. That label is only for the user. So even if you used the wrong labels, like this confusing example, the action taken when you press the button is affected only by the code after the onClick, not by the label printed on the button.