input type="image"

Today we will have a look at a special input type which has been around for a long time, but is not well known nowadays – input type="image". With it, you can create a graphical submit button.

In this article you will learn how to use it, what is so special about it and why you most probably never want to use it.

How to use it #

<form action="">
  <input id="image" type="image" alt="Login" src="/login.png">
</form>

This will create a submit button for the form showing the graphic login.png we referenced as the src. Clicking on it will submit the form like a regular submit button.

As with every image you always have to provide alternative text, in this case we can use the alt attribute. In addition, we can also use the height and width attributes to specify the size, exactly like we can do for an <img>, although you should probably do this CSS.

x and y data points #

Nowadays we can use background-image for regular submit buttons to achieve the same effect, so this is not really needed any more. There is however one special thing about type="image" – the x and y data points.

These values will automatically be submitted and represent the coordinates where the user clicked on the actual button, whereas x=50&y=10 means the user clicked 50px from the left and 10px from the top.

Do you remember image maps? Well, before the <map> element and client-side image maps were available, people used input type="image" to create server-side image maps. Yes, people really had fun with forms back in the days.

A game #

To see this in action, let's create a simple interactive game which works without any CSS or JavaScript. It uses only image type="image" on the frontend and the handling of the x and y data points is done on the backend.

The game: https://image-type-image-color.glitch.me/

Source code: https://glitch.com/edit/#!/image-type-image-color

form.elements #

Christian Schaefer notified me about another interesting aspect of <input type="image">. When you use form.elements to get a collection of all form controls for a form, input elements with type="image" won't show up there. The reason is a bit unclear, the specification says it is because of historical reasons.

Conclusion #

You should probably avoid <input type="image"> and use <input type="submit"> or <button> instead and if you need, set the image via CSS. That you get x and y coordinates out of the box is cool, but at the same time totally useless and inaccessible, as x and y will always be 0 if you use a keyboard to submit.

Resources #

MDN: input type="image" https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
MDN: map element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
MDN: HTMLFormElement.elements https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements