<input type="image">

How to Make Images into Input Buttons on Web Pages

INPUT Type=Image Description:

The image INPUT element uses an image as an input field on an HTML form. The image can be used as a submit button (with a script to submit the form ) or to collect data from the image itself (similar to an image map, but in a form). The browser submits the coordinates where the user clicked on the image.



HTML4 Strict:

HTML4 Transitional or Loose:

INPUT Type=Image Web Browser Support:

  • AvantGo Palm OS

HTML Versions

INPUT Type=Image Attributes:

Global attributes, event attributes and the input tag attributes. Plus:

  • alt
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height
  • src
  • width

INPUT Type=Image Usage:

You should use this form input field when you want to collect information from an image. For example:

  • You could use it with a map to have customers indicate a location.
  • You could use it with a product photo to indicate the problem area on a support form.

The form field will send the exact coordinates on the image where the customer clicked.

Many web designers mistakenly use this as another form of BUTTON input field, and while it can be used for that, it is more useful when used to allow customers to input data from an image.

Here is some sample code using an image as an input field.


And here is some sample code using the image as a submit button by adding the onsubmit attribute with a script.


See an example of a plain image input tag.

INPUT Type=Image Special Notes:

When you use the INPUT type="image" element, 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 element rather than the INPUT type="image". The BUTTON element 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.

More INPUT Type=Image Information: