For the following example, I created a graphic submit button for my form and inserted it into the form using the
input element with additional attributes for the image.
Example: Using a graphical submit button
<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/"> <input type="image" src="submit-button.gif" width="75" height="25" alt="submit!" value="submit" /> </form>
You'll notice that the markup includes a value for the
image. Then you provide the image source for the button, its
value, and alternative text. Remember, it's an image, so you'll want to be sure you have that alternative text in there.
The figure shows the stylized graphic button as the mouse passes over it. You'll notice that the mouse pointer turns to a hand, just as it would for any other link, and the alternative text is displayed, too.
Implementing a graphic submit button.
In most contemporary web designs, images are used for submit buttons in tandem with CSS. You've certainly noticed that although the form controls described in the tutorial so far are effective and straightforward in terms of implementation, they aren't exactly pretty. That will be repaired as soon as you begin styling form elements later in this tutorial.