<BUTTON>NN 6 IE 4 HTML 4  

<BUTTON>...</BUTTON>

HTML 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, browsers have 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 (reading the form property of the event object's srcElement or target properties) 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, recent IE browsers for both Windows and Macintosh render identical buttons. Netscape 6 tends to use less horizontal padding around the label of a button element by default.

 
Example
  
<BUTTON type="button" onClick="doSomething( );">Click Here</BUTTON>
<BUTTON type="submit" id="sender" value="infoOnly">Request Info</BUTTON>
<BUTTON type="reset"><IMG src="clearIt.gif" height="20" width="18"></BUTTON>
 
Object Model Reference
  
[window.]document.getElementById(elementID)
 
Element-Specific Attributes
 
dataflddataformatasdatasrcnametype
value
 
Element-Specific Event Handler Attributes
 
HandlerNNIEHTML
onafterupdaten/a4n/a
onbeforeupdaten/a4n/a
onrowentern/a4n/a
onrowexitn/a4n/a
accesskeyNN 6 (see text) IE 4/5 HTML 4 (see text)  

accesskey="character"

Optional  

A single character key that either gives focus to an element (in some browsers) or activates a form control or link action. 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 activate the link. In Windows versions of IE 4 and later and Netscape 6, the Alt key is required and the key is not case-sensitive. For Macintosh versions of IE 5 and later and Netscape 6, the Ctrl modifier key is required to effect the action.

Although accesskey is listed here as a widely shared attribute, that isn't strictly the case across all implementations. HTML 4 and Netscape 6 recognize this attribute only for the following elements: a, area, button, input, label, legend, and textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, object, select, span, table, and td (but removes label and legend). IE 5 adds every other renderable element, but with a caution: except for input and other form-related elements, you must also assign a tabindex attribute to the IE 5 and later element (even if simply a value of zero for all) to let the accelerator key combination bring focus to the element.

 
Example
  
<A href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</A>
		<H2 class="subsection" accesskey="2" tabindex="0">Part Two</H2>
 
Value

Single character of the document set.
 
Default

None.
 
Object Model Reference
  
[window.]document.links[i].accessKey
		[window.]document.anchors[i].accessKey
		[window.]document.formName.elementName.accessKey
		[window.]document.forms[i].elements[j].accessKey
		[window.]document.getElementById(elementID).accessKey
datafldNN n/a IE 4 HTML |4|  

datafld="columnName"

Optional  

Used with IE 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. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
 
Example
  
<BUTTON type="button" datasrc="DBSRC3" datafld="label" onClick="getTopStory( );">
Latest News</BUTTON>
 
Value

Case-sensitive identifier.
 
Default

None.
 
Object Model Reference
  
[window.]document.getElementById(elementID).dataFld
dataformatasNN n/a IE 4 HTML |4|  

dataformatas="dataType"

Optional  

Used with IE 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.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
 
Example
  
<BUTTON type="button" datasrc="DBSRC3"dataformatas="HTML" datafld="label"
onClick="getTopStory( );"> Latest News</BUTTON>
 
Value

IE recognizes two possible settings: text | html.

 
Default

text
 
Object Model Reference
  
[window.]document.getElementById(elementID).dataFormatAs
datasrcNN n/a IE 4 HTML n/a  

datasrc="dataSourceName"

Optional  

Used with IE data binding to specify the ID of the page's object element that loads the data source object for remote data access. Content from the data source is specified via the datafld attribute. Works only with text file data sources in IE 5/Mac.

This attribute was reserved in HTML 4, but was dropped in XHTML 1.0.
 
Example
  
<BUTTON type="button" datasrc="DBSRC3" datafld="label"
onClick="getTopStory( );"> Latest News</BUTTON>
 
Value

Case-sensitive identifier.
 
Default

None.
 
Object Model Reference
  
[window.]document.getElementById(elementID).dataSrc
disabledNN 6 IE 4/5.5 HTML 4  

disabled="featureSwitch"

Optional  

Boolean switch that enables or disables the user's ability to activate or otherwise access an element. This attribute is limited to interactive form control elements in Netscape 6 and HTML 4. IE 5.5 and later (Win32 only) also applies this attribute to most other renderable elements. Disabled elements are usually "greyed out" to distinguish themselves from other elements.

 
Example
  
<INPUT type="submit" name="sender" disabled="true">
 
Value

true | false
 
Default

false
 
Object Model Reference
  
[window.]document.getElementById(elementID).disabled
langNN 3 IE 4 HTML 4  

lang="languageCode"

Optional  

The language being used for the element's attribute values and content. A browser can use this information to assist in proper rendering of content with respect to details such as treatment of ligatures (when supported by a particular font or required by a written language), quotation marks, and hyphenation. Other applications and search engines might use this information to aid the selection of spell-checking dictionaries and the creation of indices.

 
Example
  
<SPAN lang="de">Deutsche Bundesbahn</SPAN>
 
Value

Case-insensitive language code.
 
Default

Browser default.
 
Object Model Reference
  
[window.]document.getElementById(elementID).lang
nameNN 6 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 the preferred 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="sender" value="infoOnly">Request Info</BUTTON>
 
Value

Case-sensitive identifier.
 
Default

None.
 
Object Model Reference
  
[window.]document.getElementById(elementID).name
tabindexNN 6 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. Note that reloading the current page does not necessarily restart the tabbing sequence from the "top." Therefore, controlling tabbing sequence is most helpful when the logic of your focusable elements is something other than the source code order of those elements (e.g., directing tabbing to fields down table columns rather than across rows).

HTML 4 and Netscape 6 limit the tabindex attribute to the following elements: a, area, button, input, object, select, textarea. To this list, IE 4 adds applet, body, div, embed, isindex, marquee, span, table, and td. IE 5 adds every other renderable element. A negative value in IE (only) removes an element from tabbing order entirely.

Links and anchors cannot be tabbed to with the Mac version of IE 4, so the tabindex for a elements is ignored in that version.

 
Example
  
<A href="chapter3.html" tabindex="3">Chapter 3</A>
 
Value

Any integer from 0 through 32,767. In IE, setting tabindex to a negative value causes the element to be skipped in tabbing order altogether.

 
Default

None.
 
Object Model Reference
  
[window.]document.getElementById(elementID).tabIndex
typeNN 6 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
  
[window.]document.getElementById(elementID).type
valueNN 6 IE 4 HTML 4  

value="text"

Optional  

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" id="connections" value="ISDN">ISDN</BUTTON>
 
Value

Any text string.
 
Default

None.
 
Object Model Reference
  
[window.]document.getElementById(elementID).value