Access and secure data - Programming in HTML5 with JavaScript and CSS3 - page 206

FIGURE 3-15 The button elements with text specified
You can take the button element even further. The element's contents don't have to be just
plain text. You can embed images within the element by using the <img> element in addition
to text, or embed an entire clickable paragraph. You also can apply cascading style sheets
(CSS) to the button to change its appearance, as shown in Figure 3-16. The HTML is as follows:
<button type="button" style="border-radius: 15px;">
<p>Something exciting lies behind this button</p>
<img src=".\myimage.jpg"/>
</button>
FIGURE 3-16 A customized button element
Within the button element lies the capability to create a highly customized button and get
default behavior from the browser.
In addition to what's provided by the various input types, such as range , email , and url ,
other attributes are available and common across most of the input controls and provide ad-
ditional flexibility in how the fields are validated. This is covered next.
Implementing content attributes
Input controls provide content attributes that allow you to control their behavior in the
browser declaratively rather than have to write JavaScript code.
Making controls read-only
Part of the specification for the HTML input controls includes a readonly attribute. If you want
to present information to users in elements such as text boxes but don't want them to be able
to alter this data, use the readonly attribute. When readonly is specified, the renderer won't
allow users to change any of the data in the text box. The following HTML demonstrates the
readonly property:
<tr>
<td>
Your Secret Code:
</td>
<td>
<input type="text" readonly value="00XY998BB"/>
</td>
</tr>