Using Images as Inputs

Just in case any of you have not seen this technique before, you can use images as submit buttons in your forms with code like this:

<input name=”submitButton” type=”image” src=”myButton.png”/>

The client will send the X and Y coordinates of where the button was clicked as the parameters “submitButton.x” and “submitButton.y”. The coordinates are seldom useful, however it is nice to be able to use images as buttons and have them work exactly as submit buttons do (without having to write any JavaScript).

These are all the basic ways of creating buttons to submit forms.

  1. Input of type “submit”.
  2. Input of type “button” with JavaScript to submit the form.
  3. Input of type “image”.
  4. Image with JavaScript to submit the form.
  5. Link with JavaScript to submit the form.
  6. CSS button with JavaScript.
  7. Flash button with JavaScript to submit the form.

Personally, I try to use standard submit inputs as much as possible since they tend to give users a familiar and consistent experience. Some might see the fact that various browsers render buttons completely differently as a disadvantage to using submit inputs since they feel it gives them less control over the look and feel of their applications, however I like the fact that users are presented with consistent and familiar buttons. I also like the flexibility of being able to use variable as buttons’ values, and even being able to change their values client-side using JavaScript.

How do you like your buttons, and why?

3 Responses to Using Images as Inputs

  1. Jim says:

    Of course you can also just use CSS to style your normal submit button. I’ve done that using a background image and gotten some nice looks.Jim

  2. Devin says:

    There’s also the button tag with type of submit. You can put any html between the opening and closing button tags, such as images, to render look of the button. This also allows you to have the value attribute different then what is rendered on the button. Though, both IE and NS4 have different bugs and I don’t know how well it works with other browsers

  3. Samuel Neff says:

    I recently complained to one of our developers that you couldn’t use the return key to submit any of the forms in his app. You had to click the submit image.He was using a plain image with javascript submit so it wasn’t tied to the enter key. Change it to an input image tag and instant keyboard accessibility. Much better user experience.