1. Technology

<input type="image">

How to Make Images into Input Buttons on Web Pages

By

HTML Image INPUT Tag

Here you see the HTML for an image input tag and how it would display on the page.

Image courtesy J Kyrnin

< Previous | HTML 5 Tags | HTML 4.01 Tags | XHTML 1.0 Elements | Next >

Free HTML Class | HTML Validators

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 onclick) 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.

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 Type=Image Web Browser Support:

HTML Versions

INPUT Type=Image Attributes:

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

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.

<form>
<input type="image" src=&/library/graphics/cecb2.gif">
</form>

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

<form>
<input type="image" src=&/library/graphics/cecb2.gif" onsubmit="submit-form();">
</form>

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 BUTTON 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:

< Previous | HTML 5 Tags | HTML 4.01 Tags | XHTML 1.0 Elements | Next >

Free HTML Class | HTML Validators

©2014 About.com. All rights reserved.