9.3 Form Enhancements^373Figure 9.20
The Web page
visitor will click the
image button to
submit the form
CHECKPOINT 9.2
- Describe the purpose of the
- Describe the purpose of the accesskeyattribute and how it supports accessibility.
- When designing a form, should you use the standard submit button, an image button,
or a button tag? Are these different in the way that they provide for accessibility?
Explain your answer. - Save your contact.html file and test in a recent browser. It should look similar to
the one shown in Figure 9.19. You can compare your work with the solution
found in the student files (Chapter9/9.3). You may notice that when you activate
the submit button, the form redisplays. This is because there is no action
property in the
Image Buttons and the Button Element
As you have worked with forms in this chapter, you may have noticed that the standard
submit button (see Figure 9.12) is a little plain. You can make the form area that you
click to submit the form more compelling and visually interesting in two ways: by
creating custom images that are configured with the <input />tag or by using the
<button>tag.
Figure 9.20 shows an image used in place of the standard submit button. This is called
an image button. When an image button is clicked, the form is submitted. The image
button is coded using the <input />tag along with type="image"and a srcattribute
with the value of the name of the image file. For example, to use the image called
login.gif as an image button the XHTML code is as follows:
<input type="image" src="login.gif" alt="Login Button" />Another way to add more interest to a form is to use the <button>element. This ele-
ment can be used to configure not only images but also blocks of text as the clickable
area that can submit or reset a form. The <button>tag is a container tag. Any Web
page content that is between the <button>and </button>tags is configured to be part
of the button. Table 9.12 lists common attributes of the <button>tag.