How It Works

In the body of the page we define a button called myButton within a form called form1. Within the attributes of the <INPUT> tag, we attach the function myButton_onmouseup() to the onmouseup event handler, and the function myButton_onmousedown() to the onmousedown event handler.

<FORM NAME=form1>    <INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up '    onmouseup="myButton_onmouseup()"    onmousedown="myButton_onmousedown()"> </FORM>

The myButton_onmouseup() and myButton_onmousedown() functions are defined in a script block in the head of the page. Each function consists of just a single line of code, in which we use the value property of the Button to change the text that is displayed on the button's face.

An important point to note is that events like onmouseup and onmousedown only trigger when the mouse pointer is actually over the element in question. For example if you click and keep held down the mouse button over our button, then move the mouse away from the button before releasing the mouse button, you'll find that the event does not fire and the text on the button's face does not change. In this instance it would be the document object's onmouseup event handler code that would fire, if we'd connected any code to it.

Don't forget that, like all form element objects, the Button object also has the onfocus and onblur events, though they are rarely used in the context of buttons.

The Submit and Reset Buttons

Two additional types of button are the submit and reset buttons. Defining the submit and reset buttons is done in the same way as defining a standard button, except that the TYPE attribue of the <INPUT> tag is set to submit or reset rather than buttons. For example, the submit and reset buttons in the earlier screenshot were created using:

 

<INPUT TYPE="submit" VALUE="Submit" NAME="submit1">

<INPUT TYPE="reset" VALUE="Reset" NAME="reset1">

These buttons have special purposes, which are not related to script.

When the submit button is clicked, the form data from the form that the button is inside gets automatically sent to the server, without the need for any script.

When the reset button is clicked, all the elements in a form are cleared and returned to their default values; the values they had when the page was first loaded.

The submit and reset buttons have corresponding objects called and , which have exactly the same properties, methods, and events as a standard Button object.