button (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| Buggy | Full | Full | Full |
Syntax
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).
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>
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
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Buggy | Buggy | Buggy | Full | Full | Full | Full | Full | Full | Full | 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 controldisabled
disables thebutton, preventing it from being usedname
defines a name by which thebuttonwill be referencedtabindex
indicates the position of the control in the logical tabbing sequence for the documenttype
defines what the button should do when it’s activatedvalue
defines the underlying value that’s associated with thebutton
User-contributed notes
- ID:
- #4
- Date:
- Mon, 08 Dec 2008 12:27:56 GMT
Need to do some more thorough testing of this. Firefox definitely has layout issues with the button element that make styling it not completely predictable.
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.