Foundation HTML5 with CSS3

Chapter 8

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.