JavaScript: The Definitive Guide

Previous Chapter 21
JavaScript Reference
Next
 

Button Element

Name

Button Element---a graphical pushbutton

Availability

Navigator 2.0, Internet Explorer 3.0; enhanced in Navigator 3.0

Synopsis

form.button_name
form.elements[i]

Properties

form

A read-only reference to the Form object that contains the Button.

name

A read-only String, set by the HTML NAME attribute, that specifies the name of the button.

type

A read-only string that specifies the type of this form element. For Button elements, it has the value "button". Available in Navigator 3.0 and later.

value

A read-only String property, specified by the HTML VALUE attribute, which specifies the value displayed in the Button element.

Methods

blur()

Remove keyboard focus from the button.

click()

Simulate a click on the button.

focus()

Give keyboard focus to the button.

Event Handlers

onblur()

Invoked when the button loses keyboard focus.

onclick()

Invoked when the button is clicked.

onfocus()

Invoked when the button is given keyboard focus.

HTML Syntax

A Button element is created with a standard HTML <INPUT> tag, with the addition of the onClick attribute:

<FORM>
    ...
  <INPUT
    TYPE="button"   specifies that this is a button
    VALUE="label" the text that is to appear within the button
    specifies the value property
    [ NAME="name" ]   a name that can later be used to refer to the button
    specifies the name property
    [ onClick="handler" ] JavaScript statements to be executed when the button
    is clicked
  >
    ...
</FORM>

Description

The Button element represents a graphical push button in a form within an HTML document. The value property contains the text that is displayed by the button. The name property is a name by which the button may be referred to. The onClick event handler is invoked when the user clicks on the button.

Usage

Use a Button element whenever you want to allow the user to trigger some action on your web page. You can sometimes use a Link object for the same purpose, but unless the desired action is to follow a hypertext link, a Button is a better choice than a Link, because it makes it more explicit to the user that there is something to be triggered.

Note that the Submit and Reset elements are types of Buttons that submit a form and reset a form's values. Often these default actions are sufficient for a form, and you do not need to create any other types of buttons.

Example

<FORM name="form1">
    <INPUT type="button"
        name="press_me_button"
        value="Press Me"
        onClick="name = prompt('What is your name?',")"
    >
</FORM>

See Also

"Element", "Form", "Reset", "Submit"


Previous Home Next
Boolean.valueOf() Book Index Button.blur()

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell