HTML and CSS Reference
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
<button type="submit" name="save" formnovalidate>
<em>Save and continue</em>
<img src="images/next.png" width="28" height="20" alt="">
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
type : Specifies the type of button control the element represents— submit , reset , or button .
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.