INPUT Image Description:
The image INPUT tag uses an image as an input fields. The image can be used as a submit button (with a script to submit the form onclick) or to collect data from the image itself (similar to an image map, but in a form). The browser will submit the coordinates where the user clicked on the image.
DTD: HTML5: <!doctype html>
HTML4 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4 Transitional or Loose: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
INPUT Image Web Browser Support:
- AvantGo Palm OS
- AvantGo Windows CE
- Chrome 1, 2, 3, 4, 5
- Firefox 1, 2, 3
- Internet Explorer 2, 3, 4, 5, 6, 7, 8
- Netscape 2, 3, 4, 6, 7, 8
- Opera 3, 4, 5, 6, 7, 8, 9, 10
- Safari 1, 2, 3, 4, 5
HTML Versions
INPUT Image Attributes:
Global attributes, event attributes and the input tag attributes. Plus:
INPUT Image Usage:
Input image to collect coordinates
<form>
<input type="image" src=&/library/graphics/cecb2.gif">
</form>
Input image as submit button
<form>
<input type="image" src=&/library/graphics/cecb2.gif" onsubmit="submit-form();">
</form>
See an example of a plain image input tag.
INPUT Image Special Notes:
When you use the input type="image" tag, you are telling the browser to submit the x and y coordinates where the image was clicked. This allows you to add image map type functionality to your forms.
I recommend using the BUTTON tag rather than the INPUT type="image" tag. The BUTTON tag is more flexible. You can add images to it, and it can be defined as a submit or reset type of button without needing any extra JavaScript.
