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