Categories:

Adding functionality to the button 

For the most part, adding functionality to the new <button> tag of HTML 4.0 means using JavaScript and the JavaScript onClick event handler. The below illustrates some possible uses for the button:

Taking surfers to a url

<button onClick="window.location='http://www.javascriptkit.com'">Back home!</button>

Closing a window:

<button onClick="window.close()">Back home!</button>

Opening a new window with the specified document:

<button onClick="window.open('mydocument.htm')">Open second window!</button>

Using the button as a form button

Another great use of the new <button> of HTML 4.0  is to use it as a form button. Like the usual form button that existed since the creation of man kind, the new button supports the type= attribute, which defines its role in a form. The below lists the possible values for the type= attribute:

  • type="button"    <!--the default type for the button. Does nothing by itself-->

  • type="reset"     <!--resets the form-->

  • type="submit"   <!--submits a form-->

The following example creates a button that resets a form when clicked on:

<form>
<input type="text" size="25" /><br />
<button type="reset"><b>reset the form!</b></button>
</form>

Lets continue to see how to control the appearance of the button, such as applying a background and controlling the dimensions of it.