Command buttons are created using either the standard Input element or the Button element. The Input element supports three types of command buttons: submit, reset, and plain-text buttons. The Button element is new in Internet Explorer 4.0 and provides the ability to create rich HTML buttons.
The submit and reset buttons act as the Default and Cancel buttons within the context of a form or the scope of the document. The Default button is originally displayed with an extra border and signifies the default action that occurs if the user presses the Enter key. The Cancel button signifies the action that occurs if the user presses the Esc key.
Within the scope of a form, the submit and reset buttons are command buttons with the predefined behavior of submitting the form or resetting the contents of the form. Outside a form, these buttons act as standard command buttons, behaving as the Default or Cancel button. In all cases, invoking the Default or Cancel button behavior from the keyboard fires a click event on the appropriate button element.
Submit and Reset buttons are defined using the TYPE attribute on the Input or Button element, as shown here:
<FORM NAME="User"> <INPUT TYPE=TEXT NAME="User" VALUE="User Name"> <INPUT TYPE=RESET VALUE="Reset the Form"> <INPUT TYPE=SUBMIT VALUE="Submit the Form"> <BUTTON TYPE=SUBMIT><EM>Submit</EM> the Form</BUTTON> </FORM>
There can only be one Default and one Cancel button per form or document scope. When more than one Default or Cancel button is specified within a single scope (that is, more than one submit or reset button), the first button of each type specified in the HTML source is the one that will be used within that scope.
If you need code that executes for the submit or reset behavior of a form, you should write the code on the form's onsubmit and onreset events and not on the onclick event of the submit and reset buttons because there are cases in which the form can be submitted or reset without the buttons ever receiving an onclick event. For example, if the form has only one text box, a submit button, and a reset button, pressing Enter while the cursor is in the text box automatically submits the value, but the submit button does not receive an onclick event. Similarly, if the user presses esc, the reset button does not receive the onclick event, but the onreset event is fired.
You can create a button in HTML using <INPUT TYPE=BUTTON> or the more general <BUTTON>...</BUTTON> tags. The following code creates rich submit and reset buttons:
<FORM NAME="test"> <BUTTON TYPE=SUBMIT> <H1>Submit this form.</H1> </BUTTON> <BUTTON TYPE=RESET> <H2>Reset this form.</H2> </BUTTON> </FORM>
Because you can place HTML in the Button element, you can create interesting effects in a button. Although any HTML and style can be defined for the contents, the event model for the contents is limited compared to the rest of Dynamic HTML.
Button Events
As shown in the following code, the Button element supports rich HTML, but the elements within the button do not fire events. Therefore, event handlers cannot be written for any of the elements that exist within the button.
<!-- The event handlers defined in this button do not fire. --> <BUTTON> <H1 ONCLICK="alert(`clicked!');">Click Me!</H1> <H2 ONMOUSEOVER="this.style.color = `red';">Turn red.</H2> </BUTTON>
Instead, all events on items within the Button element are routed directly to the button itself.
Button Contents
The contents of the button are exposed differently depending on whether the button is defined using the <INPUT> tag or the <BUTTON> tag. The contents of a button created using the <INPUT> tag are exposed through the value and innerText properties, similar to the other Input types. The contents of a button created using the <button> tag are exposed through the innerText and innerHTML properties, but not through the value property. Like the TextArea element, a button created using a <BUTTON> tag also exposes richer access to the contents through the createTextRange method.