HTML and CSS [Electronic resources] نسخه متنی

Using a Graphic Submit Button

If you'd like your submit button to look more integrated with your visual design, you can create an image and use it for the submit process instead. The caveat here is that this technique does not equally apply for the reset button unless you add JavaScript. But in terms o177 itself, you can use a custom button for submit if you so desire.

For Example 5-12, 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 5-12. 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"  
 value="submit" />
</form>

You'll notice that the markup includes a value for the type attribute, image. Then you provide the image source for the button, its width and height, its value, and alternative text. Remember, it's an image, so you'll want to be sure you have that alternative text in there.

Figure 5-14 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.