<BUTTON>

NN n/a IE 4 HTML 4

<BUTTON>...</BUTTON>

End Tag: Required

The BUTTON element is patterned after the INPUT element (of types button, submit, and reset) but carries some extra powers, particularly when used as a submit-type button. Content for the button's label goes between the element's start and end tags, rather than being assigned as an attribute. Other elements can be used to generate the label content, including an IMG element if so desired (although client-side image maps of such images are strongly discouraged by the W3C). Although you can assign a style sheet to a BUTTON element, you can also wrap the label content inside an element (such as a SPAN) and assign or override style rules just for that content. Both style sheet mechanisms permit the button label to use custom fonts and styles.

When a BUTTON element is assigned a TYPE of submit, the browser submits the button's NAME and VALUE attributes to the server as a name/value pair, like other form elements. No special form handling is conveyed by a BUTTON when other types are specified.

In theory, a BUTTON element should be embedded within a FORM element. In practice, IE 4 has no problem rendering a free-standing BUTTON element. This might be acceptable when no related form elements (such as text boxes) need to be referenced by scripts associated with the button. Some scripting shortcuts (passing form object references as parameters) simplify the scripted interactivity between form elements.

The W3C implemented this INPUT element variant to offer browser makers a chance to create a different, richer-looking button. In practice, in IE 4, both button types have very similar appearance. You can detect a slight difference, however, between the INPUT and BUTTON rendering on the Mac version of IE 4: with a BUTTON element, the browser draws more whitespace around the label text for a more pleasing appearance.

Example

<BUTTON TYPE="button" onClick="doSomething()">Click Here</BUTTON>
<BUTTON TYPE="submit" NAME="Type" VALUE="infoOnly">Request Info</BUTTON>
<BUTTON TYPE="reset"><IMG SRC="clearIt.gif" HEIGHT=20 WIDTH=18></BUTTON>

Object Model Reference

IE	[window.]document.all.elementID

ACCESSKEY

NN n/a IE 4 HTML 4

ACCESSKEY="character"

Optional

A single character key that specifies the keyboard shortcut to effect a click of the button. The browser and operating system determine if the user must press a modifier key (e.g., Ctrl, Alt, or Command) with the access key to "click" the button. In IE 4/Windows, the Alt key is required, and the key is not case sensitive. This attribute does not work in IE 4/Mac.

Example

<BUTTON TYPE="button" ACCESSKEY=t onClick="goToContents()">
Table of Contents
</BUTTON>

Value
Single character of the document set.

Default

None.

Object Model Reference

IE	[window.]document.all.elementID.accessKey

DATAFLD

NN n/a IE 4 HTML n/a

DATAFLD="columnName"

Optional

Used with IE 4 data binding to associate a remote data source column name with the label of a button. The data source column must be either plain text or HTML (see DATAFORMATAS). A DATASRC attribute must also be set for the BUTTON element.

Example

<BUTTON TYPE="button" DATASRC="#DBSRC3" DATAFLD="label" onClick="getTopStory()"> 
</BUTTON>

Value
Case-sensitive identifier.

Default

None.

Object Model Reference

IE	[window.]document.all.elementID.dataFld

DATAFORMATAS

NN n/a IE 4 HTML n/a

DATAFORMATAS="dataType"

Optional

Used with IE 4 data binding, this attribute advises the browser whether the source material arriving from the data source is to be treated as plain text or as tagged HTML. This attribute setting depends entirely on how the data source is constructed.

Example

<BUTTON TYPE="button" DATASRC="#DBSRC3"DATAFORMATAS="HTML" DATAFLD="label"
onClick="getTopStory()"> 
</BUTTON>

Value
IE 4 recognizes two possible settings: text | HTML.

Default

text

Object Model Reference

IE	[window.]document.all.elementID.dataFormatAs

DATASRC

NN n/a IE 4 HTML n/a

DATASRC="dataSourceName"

Optional

Used with IE 4 data binding to specify the name of the remote ODBC data source (such as an Oracle or SQL Server database) to be associated with the element. Content from the data source is specified via the DATAFLD attribute.

Example

<BUTTON TYPE="button" DATASRC="#DBSRC3" DATAFLD="label"
onClick="getTopStory()">
</BUTTON>

Value
Case-sensitive identifier.

Default

None.

Object Model Reference

IE	[window.]document.all.elementID.dataSrc

DISABLED

NN n/a IE 4 HTML 4

DISABLED

Optional

A disabled BUTTON element appears grayed out on the screen and cannot be activated by the user. In Windows, a disabled BUTTON cannot receive focus and does not become active within the tabbing order rotation. HTML 4.0 also specifies that a disabled BUTTON whose TYPE is submit should not send its name/value pair when the form is submitted.

The DISABLED attribute is a Boolean type, which means that its presence in the attribute sets its value to true. Its value can also be adjusted after the fact by scripting (see the button object in ).

Example

<BUTTON TYPE="submit" DISABLED>Ready to Submit</BUTTON>

Value
The presence of the attribute sets its value to true.

Default

false

Object Model Reference

IE	[window.]document.all.elementID.disabled

NAME

NN n/a IE 4 HTML 4

NAME="elementIdentifier"

Optional

For a BUTTON element, the NAME attribute can play two roles, depending on the TYPE attribute setting. For all TYPE attribute settings, the NAME attribute lets you assign an identifier that can be used in scripted references to the element (the ID attribute is an alternate way to reference the element). For a button type of submit, the NAME attribute is sent as part of the name/value pair to the server at submit time.

Example

<BUTTON TYPE="submit" NAME="Type" VALUE="infoOnly">Request Info</BUTTON>

Value
Case-sensitive identifier.

Default

None.

Object Model Reference

IE	[window.]document.all.elementID.name

TABINDEX

NN n/a IE 4 HTML 4

TABINDEX=integer

Optional

A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their TABINDEX attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest TABINDEX value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same TABINDEX values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the TABINDEX attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. A BUTTON element set to be disabled does not become part of the tabbing rotation.

Note that the Macintosh user interface does not provide for giving focus to elements other than text input fields. Buttons cannot be tabbed to on the Mac version of IE 4.

Example

<BUTTON TYPE="button" TABINDEX=3 onClick="doSomething()">Click Here
</BUTTON>

Value
Any integer from 0 through 32767. In IE 4, setting the TABINDEX to -1 causes the element to be skipped in tabbing order altogether.

Default

None.

Object Model Reference

IE	[window.]document.elementID.tabIndex

TYPE

NN n/a IE 4 HTML 4

TYPE="buttonType"

Optional

Defines the internal style of button for the browser. A button style is intended to be used to initiate scripted action via an event handler. A "reset" style behaves the same way as an INPUT element whose TYPE attribute is set to reset, returning all elements to their default values. A "submit" style behaves the same way as an INPUT element whose TYPE attribute is set to submit. A BUTTON element whose TYPE attribute is set to either reset or submit must be associated with a form for its implied action to be of any value to the page.

Example

<BUTTON TYPE="reset"><IMG SRC="clearIt.gif" HEIGHT=20 WIDTH=18></BUTTON>

Value
Case-insensitive constant value from the following list of three: button | reset | submit.

Default

button

Object Model Reference

IE	[window.]document.all.elementID.type

VALUE

NN n/a IE 4 HTML 4

VALUE="text"

Optional/Required

Preassigns a value to a BUTTON element that is submitted to the server as part of the name/value pair when the element is a member of a form.

Example

<BUTTON NAME="connections" VALUE="ISDN">ISDN</BUTTON>

Value
Any text string.

Default

None.

Object Model Reference

IE	[window.]document.all.elementID.value