HTML and CSS Reference
In-Depth Information
fields, or any controls with
pattern
attributes). Note that this button contains some emphasized text and
an image, something you couldn't do with an ordinary
input
element.
Listing 8-21
. A
button
element containing some emphasized text and an image
<p>
<button type="submit" name="save" formnovalidate>
<em>Save and continue</em>
<img src="images/next.png" width="28" height="20" alt="">
</button>
</p>
When a browser renders this on-screen (as shown in Figure 8-23), the entire element and its contents
becomes an active push-button to submit the form. By default, a
button
element will have the same
appearance as an
input
button, but because it can contain other HTML elements, it creates many more
opportunities for styling with CSS.
Figure 8-23
. The button as it appears in Firefox for OS X without any additional styling
It's not much to look at with default styling, and because the button contains some non-text content (the
arrow image), OS X gives it a slightly different style than the typical rounded, glassy look most other
buttons receive. But with a bit of CSS enhancement this humble element can look like Figure 8-24, an
effect that would be impossible with an
input
element.
Figure 8-24.
The same
button
element, now with more pizzazz
Required Attributes
type
:
Specifies the type of button control the element represents—
submit
,
reset
, or
button
.
Optional Attributes
autofocus
: This Boolean attribute is new in HTML5 and indicates that the button should
automatically receive focus when the page loads.
disabled
: A Boolean attribute that disables the control so it can't receive focus or be activated.
Many browsers will display disabled buttons in a “grayed-out” style by default.
form
: This is new in HTML5 and allows the control to be associated with one or more additional
forms. The
form
attribute accepts a value of one or more form IDs, separated by spaces. This
feature allows authors to work around the lack of support for nested
form
elements.
