button (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
Example
Here, the phrase including the
em element is a clickable
button:
<form> <button>I am <em>really</em> sure I want to proceed</button> </form>
- Type
- inline element
- Contains
- block-level
elements, inline elements
(except
a,input,select,textarea,label,button, andiframe) - Contained by
- block-level
elements, inline elements
(except
a,input,select,textarea,label,button, andiframe)
Description
The button
form control is an attempt at improving the humble
"submit" button (input type="submit"),
which can only contain one line of text (the
value attribute), and places certain
limitations on the possibilities for CSS styling. It’s possible to wrap
the button element around a whole collection of HTML
elements, encapsulating the entire area as a single, clickable element. Of
course, it’s not necessarily wise to cram too much into the button, but
some helpful effects are possible. For example, this control
could be used to add emphasis to part of the button text, as Figure 1 shows.
By default, the button will act as a
"submit" button, but we can set it, via the type attribute, to be a "reset" or
a simple "button" (with no default action—we’d need to
use JavaScript to add behavior in this case).
Use This For …
This control is used in cases
where a simple "submit" button isn’t capable of
containing the information required, or where CSS styling requirements
can’t be met by a simple "submit" button.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
This element type isn’t particularly well supported and has limited practical value.
Rendering of the button and its contents varies, but Internet Explorer appears to provide the worst rendering.
In this Section
- accesskey
assigns a key to put focus on this form control - disabled
disables thebutton, preventing it from being used - name
defines a name by which thebuttonwill be referenced - tabindex
indicates the position of the control in the logical tabbing sequence for the document - type
defines what the button should do when it’s activated - value
defines the underlying value that’s associated with thebutton
Related Reading
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
