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
<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
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.
Search WWH ::

Custom Search