Shortcomings of using Images in place of HTML buttons.

Posted September 27, 2004

I was working on EVS Minder, the one stop shop for advanced online (pre) registration and on-site registration for conventions, at Esystems today. The online interface is very form intensive, and has a lot of submit buttons. My original designs had called for image replacement of the standard HTML button.

In order to use an image for a submit button, set this attribute in the input field;

<input type=”image” src=”something.jpg”>

However, the problem with using images for submit buttons is we found when a user submits information, the values returned were two numbers instead of the value set in the “value” attribute. The two numbers returned are coordinates, the value name plus an x and y coordinate. These numbers signify the place where the user clicked the button in relation to the upper left of the button.

So for Chris our programmer, it was screwing up his php code because he was testing for a value of “submit” and instead it was giving him something like this;

submit_y = 4

submit_x = 12

The other downfalls are that the buttons can be problematic in browsers. For browsers like Mozilla and Opera where a user can set whether they want to turn off all image downloading, the form will be useless as the image button wont’ show up at all. Since HTML 4.0 you can add an alt tag to the input field, so at the very least, if you insist on aesthetic over function, it will show the text in place of the image and the user can get an inclination of what was supposed to be there.

All in all, I decided to use a background image for all my submit buttons to spruce them up a little, but to keep them most accessible across the board.

Small HTML Tidbits

I came across some HTML I had never seen today. <big> and <small>which basically scale the text size in your webpage. It seems highly useless as it isn’t very specific.

<> These characters are known as chevrons.