input type="button" Element

 

Module

The input type="button" element is an inline element declared by the XHTML 1.1 Forms Module but is not present in the *W3C XHTML 1.1 Basic Forms Module

Elements in the Forms Module are:
form | label | textarea | select | optgroup | option | button | fieldset | legend |
input type="button" | input type="checkbox" | input type="file" | input type="hidden" | input type="image" | input type="password" | input type="radio" | input type="reset" | input type="submit" | input type="text"

Description

The input type="button" element is used within a form to create a push-button, with the button's text being the contents of its value attribute. Unlike other button-creating input elements (input type="submit", input type="reset" and input type="image"), this push-button has no allocated function. This means that pushing the button will have absolutely no effect unless some script (usually JavaScript) is written to provide functionality. Bear in mind, however, that user agents without scripting capability (or with scripting disabled) will present the user with a button which does absolutely nothing. This may be confusing if no explanation is provided. It is therefore probably best to create such buttons using the same scripting language as that which assigns the handler.

If your browser supports JavaScript and it is enabled, the above button should function correctly and thank you for pushing it! If you can view the HTTP Response Headers for this page (using, for example, the excellent *Web Developer Toolbar for *Firefox), you will find that I have added a Content-Script-Type header of "text/javascript" to this page so that the user agent is informed that the onclick attribute above contains JavaScript. In normal circumstances, however, all event handling code is best put in external scripts (and included using the script element) rather than by adding attributes from the Intrinsic Events Module to individual elements.

Note: No name=value pair is sent to the processing URI for an input type="button" element.

See also the button element.

Padding Issues

In Internet Explorer, for reasons unknown, buttons with long text content are usually rendered with excessive horizontal padding - the longer the button text, the more excessive the padding. This annoyance can be avoided by using the CSS declarations width:auto; overflow:visible; and setting the padding property to the desired value.

#REQUIRED Attributes

Although the type attribute is not #REQUIRED on the input element, its default value is "text" and so must be present on input type="button".

---

Specific Attributes

From the Forms Module - the Element's own Module

accesskey [ type Character ]

Key to be pressed which allows the button to be activated directly from the keyboard

disabled [ type Boolean ]

If this attribute is present, the button is initially disabled. The user cannot interact with a disabled control.

name [ type CDATA ]

A name for the push-button (this button is not a submit or reset button and will only perform any action if scripting handlers are associated with it). A name=value pair is not sent to the processing URI for a push-button and the so the name attribute is usually only used to refer to the button from within scripts.

tabindex [ type Number ]

An integer between 0 and 32767 specifying the position of the button in the tabbing order of the document

value [ type CDATA ]

Specifies the text to be used as the button label - the default button text is empty so the button will have a label only if this attribute is specified.

From the Intrinsic Events Module

onblur [ type Script ]

Script to be executed when the element loses focus

onfocus [ type Script ]

Script to be executed when the element receives focus

---

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

---

Content Model

The Content Model for the input type="button" element is:

EMPTY

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of input type="button"

This element is empty and may have no children.

Valid parents of input type="button"

• From the Text Module: abbr, acronym, address, cite, code, dfn, div, em, h1 - h6, kbd, p, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: fieldset, label, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt