Summary
The button type of the input element represents a button with no default behavior. Compare with the button element which offers default behaviours with via attributes.
Overview Table
Examples
This example uses the INPUT type=button element to define a button that responds appropriately when clicked.
<input type=button id=btnEmergency value="In case of emergency,
push this button!"
onClick="alert('Aaaaaaaggggghh!!!!')">
Notes
Remarks
As of Windows Internet Explorer 7, the input type=button object no longer supports the DATAFORMATAS attribute.
Standards information
- HTML 4.01 Specification, Section 17.4
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.7.1.22
HTML information
Closing Tag | forbidden |
---|---|
CSS Display | inline |
The input type=button object has these types of members:
- [#events Events]
- [#methods Methods]
- [#properties Properties]
Events
The input type=button object has these events.
Event | Description |
---|---|
onabort | Fires when the user aborts the download. |
onactivate | Fires when the object is set as the active element. |
onafterupdate | Fires on a databound object after successfully updating the associated data in the data source object. |
onbeforeactivate | Fires immediately before the object is set as the active element. |
onbeforecopy | Fires on the source object before the selection is copied to the system clipboard. |
onbeforecut | Fires on the source object before the selection is deleted from the document. |
onbeforedeactivate | Fires immediately before the activeElement is changed from the current object to another object in the parent document. |
onbeforeeditfocus | Fires before an object contained in an editable element enters a UI Activation state or when an editable container object is control selection. |
onbeforepaste | Fires on the target object before the selection is pasted from the system clipboard to the document. |
onbeforeupdate | Fires on a databound object before updating the associated data in the data source object. |
onblur | Fires when the object loses the input focus. |
oncellchange | Fires when data changes in the data provider. |
onchange | Fires when the contents of the object or selection have changed. |
onclick | Fires when the user clicks the left mouse button on the object. |
oncontextmenu | Fires when the user clicks the right mouse button in the client area, opening the context menu. |
oncontrolselect | Fires when the user is about to make a control selection of the object. |
oncut | Fires on the source element when the object or selection is removed from the document and added to the system clipboard. |
ondataavailable | Fires periodically as data arrives from data source objects that asynchronously transmit their data. |
ondatasetchanged | Fires when the data set exposed by a data source object changes. |
ondatasetcomplete | Fires to indicate that all data is available from the data source object. |
ondblclick | Fires when the user double-clicks the object. |
ondeactivate | Fires when the activeElement is changed from the current object to another object in the parent document. |
ondrag | Fires on the source object continuously during a drag operation. |
ondragend | Fires on the source object when the user releases the mouse at the close of a drag operation. |
ondragenter | Fires on the target element when the user drags the object to a valid drop target. |
ondragleave | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. |
ondragover | Fires on the target element continuously while the user drags the object over a valid drop target. |
ondragstart | Fires on the source object when the user starts to drag a text selection or selected object. |
ondrop | Fires on the target object when the mouse button is released during a drag-and-drop operation. |
onerror | Fires when an error occurs during object loading. |
onerrorupdate | Fires on a databound object when an error occurs while updating the associated data in the data source object. |
onfilterchange | Fires when a visual filter changes state or completes a transition. |
onfocus | Fires when the object receives focus. |
onfocusin | Fires for an element just prior to setting focus on that element. |
onfocusout | Fires for the current element with focus immediately after moving focus to another element. |
onhelp | Fires when the user presses the F1 key while the client is the active window. |
oninput | Occurs when the text content of an element is changed through the user interface. |
onkeydown | Fires when the user presses a key. |
onkeypress | Fires when the user presses an alphanumeric key. |
onkeyup | Fires when the user releases a key. |
onlayoutcomplete | Fires when the print or print preview layout process finishes filling the current LayoutRect object with content from the source document. |
onload | Fires immediately after the client loads the object. |
onlosecapture | Fires when the object loses the mouse capture. |
onmousedown | Fires when the user clicks the object with either mouse button. |
onmouseenter | Fires when the user moves the mouse pointer into the object. |
onmouseleave | Fires when the user moves the mouse pointer outside the boundaries of the object. |
onmousemove | Fires when the user moves the mouse over the object. |
onmouseout | Fires when the user moves the mouse pointer outside the boundaries of the object. |
onmouseover | Fires when the user moves the mouse pointer into the object. |
onmouseup | Fires when the user releases a mouse button while the mouse is over the object. |
onmousewheel | Fires when the wheel button is rotated. |
onmove | Fires when the object moves. |
onmoveend | Fires when the object stops moving. |
onmovestart | Fires when the object starts to move. |
onpaste | Fires on the target object when the user pastes data, transferring the data from the system clipboard to the document. |
onpropertychange | Fires when a property changes on the object. |
onreadystatechange | Fires when the state of the object has changed. |
onreset | Fires when the user resets a form. |
onresize | Fires when the size of the object is about to change. |
onresizeend | Fires when the user finishes changing the dimensions of the object in a control selection. |
onresizestart | Fires when the user begins to change the dimensions of the object in a control selection. |
onrowenter | Fires to indicate that the current row has changed in the data source and new data values are available on the object. |
onrowexit | Fires just before the data source control changes the current row in the object. |
onrowsdelete | Fires when rows are about to be deleted from the recordset. |
onrowsinserted | Fires just after new rows are inserted in the current recordset. |
onscroll | Fires when the user repositions the scroll box in the scroll bar on the object. |
onselect | Fires when the current selection changes. |
onselectstart | Fires when the object is being selected. |
Methods
The input type=button object has these methods.
Method | Description |
---|---|
addBehavior | Attaches a behavior to the element.
This method is not supported for Metro style apps using JavaScript. |
appendChild | Appends an element as a child to the object. |
applyElement | Makes the element either a child or parent of another element. |
attachEvent | Binds the specified function to an event, so that the function gets called whenever the event fires on the object. |
blur | Causes the element to lose focus and fires the onblur event. |
clearAttributes | Removes all attributes and values from the object. |
click | Simulates a click by causing the onclick event to fire. |
cloneNode | Copies a reference to the object from the document hierarchy. |
compareDocumentPosition | Compares the position of two nodes in a document. |
componentFromPoint | Returns the component located at the specified coordinates via certain events. |
contains | Checks whether the given element is contained within the object. |
createTextRange | Creates a TextRange object for the element. |
detachEvent | Unbinds the specified function from the event, so that the function stops receiving notifications when the event fires. |
doScroll | Simulates a click on a scroll bar component. |
dragDrop | Initiates a drag event. |
fireEvent | Fires a specified event on the object. |
focus | Causes the element to receive the focus and executes the code specified by the onfocus event. |
getAdjacentText | Returns the adjacent text string. |
getAttribute | Retrieves the value of the specified attribute. |
getAttributeNode | Retrieves an attribute object referenced by the attribute.name property. |
getAttributeNodeNS | Gets an attribute object that matches the specified namespace and name. |
getAttributeNS | Gets the value of the specified attribute within the specified namespace. |
getBoundingClientRect | Retrieves an object that specifies the bounds of a collection of TextRectangle objects. |
getClientRects | Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line. |
getElementsByClassName | Gets a collection of objects that are based on the value of the CLASS attribute. |
getElementsByTagNameNS | Gets a collection of objects that are based on the specified element names within a specified namespace. |
hasAttribute | Determines whether an attribute with the specified name exists. |
hasAttributeNS | Determines whether an attribute that has the specified namespace and name exists. |
hasAttributes | Determines whether one or more attributes exist for the object. |
hasChildNodes | Returns a value that indicates whether the object has children. |
insertAdjacentElement | Inserts an element at the specified location. |
insertAdjacentHTML | Inserts the given HTML text into the element at the location. |
insertAdjacentText | Inserts the given text into the element at the specified location. |
insertBefore | Inserts an element into the document hierarchy as a child node of a parent object. |
isDefaultNamespace | Indicates whether or not a namespace is the default namespace for a document. |
isEqualNode | Determines if two nodes are equal. |
isSameNode | Determines if two node references refer to the same node. |
isSupported | Returns a value indicating whether or not the object supports a specific DOM standard. |
lookupNamespaceURI | Gets the URI of the namespace associated with a namespace prefix, if any. |
lookupPrefix | Gets the namespace prefix associated with a URI, if any. |
mergeAttributes | Copies all read/write attributes to the specified element. |
msMatchesSelector | Determines whether an object matches the specified selector. |
normalize | Merges adjacent DOM objects to produce a normalized document object model. |
querySelector | Retrieves the first DOM
element node from descendants of the starting element node that match any selector within the supplied selector string. |
querySelectorAll | Retrieves all DOM
element nodes from descendants of the starting element node that match any selector within the supplied selector strings. |
releaseCapture | Removes mouse capture from the object in the current document. |
removeAttribute | Removes an attribute from an object. |
removeAttributeNode | Removes an attribute object from the object. |
removeAttributeNS | Removes the specified attribute from the object. |
removeBehavior | Detaches a behavior from the element. |
removeChild | Removes a child node from the object. |
removeNode | Removes the object from the document hierarchy. |
replaceAdjacentText | Replaces the text adjacent to the element. |
replaceChild | Replaces an existing child element with a new child element. |
replaceNode | Replaces the object with another element. |
scrollIntoView | Causes the object to scroll into view, aligning it either at the top or bottom of the window. |
select | Highlights the input area of a form element. |
setActive | Sets the object as active without setting focus to the object. |
setAttribute | Sets the value of the specified attribute. |
setAttributeNode | Sets an attribute object node as part of the object. |
setAttributeNodeNS | Sets an attribute object as part of the object. |
setAttributeNS | Sets the value of the specified attribute within the specified namespace. |
setCapture | Sets the mouse capture to the object that belongs to the current document. |
swapNode | Exchanges the location of two objects in the document hierarchy. |
Properties
The input type=button object has these properties.
Property | Description |
---|---|
accessKey | Sets or retrieves the access key for the object. |
ATOMICSELECTION | Specifies whether the element and its contents must be selected as a whole, indivisible unit. |
attributes | Retrieves a collection of attributes of the object. |
canHaveChildren | Gets a value indicating whether the object can contain child objects. |
canHaveHTML | Retrieves the value indicating whether the object can contain rich HTML markup. |
childElementCount | Retrieves the number of immediate child nodes of the current element or a zero if the element does not contain any child nodes. childElementCount does not return all child nodes, only child nodes that are nodeType =1, or element nodes. |
className | Sets or retrieves the class of the object. |
clientHeight | Retrieves the height of the object including padding, but not including margin, border, or scroll bar. |
clientLeft | Retrieves the distance between the offsetLeft property and the true left side of the client area. |
clientTop | Retrieves the distance between the offsetTop property and the true top of the client area. |
clientWidth | Retrieves the width of the object including padding, but not including margin, border, or scroll bar. |
contentEditable | Sets or retrieves the string that indicates whether the user can edit the content of the object. |
dataFld | Sets or retrieves a field of a given data source, as specified by the dataSrc property, to bind to the specified object. |
dataFormatAs | Sets or retrieves the rendering format for the data supplied to the object. |
dataSrc | Sets or retrieves the source of the data for data binding. |
defaultValue | Sets or retrieves the initial contents of the object. |
dir | Sets or retrieves the reading order of the object. |
disabled | Sets or retrieves a value that indicates whether the user can interact with the object. |
firstChild | Gets a reference to the first child in the childNodes collection of the object. |
firstElementChild | Retrieves a reference to the first child element, or NULL if there are no child elements. |
form | Retrieves a reference to the form that the object is embedded in. |
hideFocus | Sets or gets the value that indicates whether the object visibly shows that it has focus. |
id | Sets or retrieves the string identifying the object. |
innerHTML | Sets or retrieves the HTML between the start and end tags of the object. |
innerText | Sets or retrieves the text between the start and end tags of the object. |
isContentEditable | Gets the value that indicates whether the user can edit the contents of the object. |
isDisabled | Gets the value that indicates whether the user can interact with the object. |
isMultiLine | Retrieves the value indicating whether the content of the object contains one or more lines. |
isTextEdit | Retrieves whether a TextRange object can be created using the object. |
lang | Sets or retrieves the language to use. |
language | Sets or retrieves the language in which the current script is written. |
lastChild | Gets a reference to the last child in the childNodes collection of an object. |
lastElementChild | Retrieves a reference to the last child element or NULL if there are no child elements. |
localName | Retrieves the local name of the fully qualified XML declaration for a node. |
name | Sets or retrieves the name of the object. |
namespaceURI | Retrieves the namespace URI of the fully qualified XML declaration for a node. |
nextElementSibling | Retrieves a reference to the sibling element that immediately follows or NULL if the element does not have any sibling elements that follow it. |
nextSibling | Retrieves a reference to the next child of the parent for the object. |
nodeName | Gets the name of a particular type of node. |
nodeType | Retrieves the type of the requested node. |
nodeValue | Gets or sets the value of a node. |
offsetHeight | Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property. |
offsetLeft | Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the offsetParent property. |
offsetParent | Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. |
offsetTop | Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetParent property. |
offsetWidth | Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property. |
outerHTML | Sets or retrieves the object and its content in HTML. |
outerText | Sets or retrieves the text of the object. |
ownerDocument | Retrieves the Document object associated with the node. |
parentElement | Retrieves the parent object in the object hierarchy. |
parentNode | Retrieves the parent object in the document hierarchy. |
parentTextEdit | Retrieves the container object in the document hierarchy that can be used to create a TextRange containing the original object. |
prefix | Retrieves the local name of the fully qualified XML declaration for a node. |
previousElementSibling | Retrieves a reference to the immediately preceding sibling element or NULL if the element does not have any preceding siblings. |
previousSibling | Gets a reference to the previous child of the parent for the object. |
readyState | Retrieves a value that indicates the current state of the object. |
recordNumber | Retrieves the ordinal record from the data set that generated the object. |
role | Sets or retrieves the role for this element. |
scopeName | Gets the namespace defined for the element.
This property is not supported for Metro style apps using JavaScript. |
scrollHeight | Retrieves the scrolling height of the object. |
scrollLeft | Sets or retrieves the distance between the left edge of the object and the leftmost portion of the content currently visible in the window. |
scrollTop | Sets or retrieves the distance between the top of the object and the topmost portion of the content currently visible in the window. |
scrollWidth | Retrieves the scrolling width of the object. |
size | Sets or retrieves the size of the control. |
sourceIndex | Retrieves the ordinal position of the object, in source order, as the object appears in the document's all collection. |
status | Sets or retrieves the value indicating whether the control is selected. |
STYLE | Sets an inline style for the element. |
tabIndex | Sets or retrieves the index that defines the tab order for the object. |
tagName | Retrieves the tag name of the object. |
tagUrn | Sets or gets the URN specified in the namespace declaration.
This property is not supported for Metro style apps using JavaScript. |
textContent | Sets or retrieves the text content of an object and any child objects. |
title | Sets or retrieves advisory information (a ToolTip) for the object. |
type | Retrieves or initially sets the type of input control represented by the object. |
uniqueID | Retrieves an autogenerated, unique identifier for the object. |
uniqueNumber | Retrieves the element's unique number. |
value | Sets or retrieves the displayed value for the control object. This value is returned to the server when the control object is submitted. |
width | Sets or retrieves the calculated width of the object. |
See also
Other articles
- The button element