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?