Use an Image as a Form Submit Button

By Stephen Bucaro

Most modern websites use an image submit button rather than the default gray button. It's very easy to create an image submit button because the html input type="image" by default creates a from submit button. The only thing you need is to provide an image for the button.

Shown below is example code of a form that uses an image submit button. Here the visitor would request a report to be sent to their email.

<form name="reportform" action="http://www.domain.com/formcode.asp">
<label>Email Address: </label><input type="text" name="email" size="28" />
<input type="image" align="middle" name="submit" alt="Send Report" border="1" width="46" height="31" src="sendreport.jpg">
</form>

Note: A link to the server-side code that processes the form data needs to be placed in the form tag's action attribute as shown in the code. The form shown above does not actually submit the form to the server, but instead uses the image button's onclick event along the javascript shown below to display the form's data. This is a good way to test a form.

onclick="alert(document.reportform.email.value); return false;"

More HTML Code:
• HTML Blockquote Basics
• Can Enterprise Applications Be Made Using HTML5?
• Nesting HTML Lists
• Form Input Labels
• The HTML Head Tag
• HTML Image Basics
• Make an HTML Element Editable
• Using col and colgroup to Apply Attributes to a Table Column
• How to Troubleshoot an HTML Table
• Line Breaks in HTML

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues