Using images on a regular HTML input button

Posted October 13, 2004

Using images on regular HTML buttons is something I have discovered in the last five months that can really help with the graphical appearance of a static form. Here is an example of a graphical button and the code;

Now granted, this is a quick example I pulled from my image archive, but you can design anything you want and use it in it’s place, here is the code;

The thing that is most important about graphic buttons is to use the alt attribute and here is why. Most browsers have options to turn off the downloading of images. Some people who have slow connections take advantage of this option, and therefore you button won’t be downloaded, and without an alt attribute, the user wont’ have any way of using a form, or any indication that there should have been a button there.

However, if you include the “alt” attribute, that alt text will come up in the dimensions of the button and the user will still be able to click the text instead. (This also helps if you are lazy and forget to check your link, and it becomes broken.)

I left out the “src” attribute for the input field below and look what the alt text does.