HTML and CSS Reference
In-Depth Information
Designing a Custom Button
The text of a command, submit, or reset button is determined by the
value
attribute.
You are only allowed to specify the text displayed on the button; you can't add other
elements such as an inline image to the button value. For more control over a button's
appearance, you can use the
button
element as follows
<button type=”
text
”>
content
</button>
where the
type
attribute specifies the button type (
submit
,
reset
, or
button
—for creat-
ing a command button) and
content
is page elements displayed within the button. The
page content can include formatted text, inline images, and other design elements sup-
ported by HTML. Figure 6-66 shows an example of a button that contains both formatted
text and an inline image.
figure 6-66
creating a custom button
HTML code
custom button
You will not need a custom button in the survey form.
Validating a Web Form
The final part of your work on the survey form is to test your ability to submit values
from the form. Data values often need to be tested or
validated
before they can be used.
Validation can occur after the data is sent to the server with
server-side validation
, and
it also can be tested on a user's own computer via
client-side validation
before sending
it to the server. Whenever possible, you should supplement your server-side validation
with client-side validation to reduce the workload on the server. For example, in a pay-
ment form, you'll want to verify that a user has entered a valid credit card number and
completed all of the fields required for payment before submitting the data to the server.
Sending an invalid payment to the server slows down the process and puts an extra burden
on a server that may be dealing with hundreds or thousands of transactions every hour.
HTML5 includes several attributes that can be used to perform client-side validation.
At the time of this writing, Opera, Firefox, and Google Chrome support client-side valida-
tion under HTML5; Internet Explorer and Safari do not. Once again, if client-side valida-
tion is an essential part of your Web site design, use a JavaScript library like jQuery or a
program of your own creation to perform the validation on the user's computer. However,
you also can supplement these programs with HTML5's built-in validation attributes.
The first HTML5 attribute you'll examine can be used to ensure that the user com-
pletes all required fields.
