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.