(CSS) CSS: Submit Button Background Images

Sat, 10 Jul 2010 08:45:15 GMT

There are three different types of elements that submit forms: * <input type="image"> * <input type="submit"> * <button type="submit"> Logically, it would seem that you would want to use input type="image" if you wanted to display an image instead of a default button. However, using input type="image" causes the page to submit two extra variables for your x and y mouse click coordinates on the image as below. Unless you are specifically using this for advertising or some purpose that takes advantage of the coordinates, this is just unnecessary data that also causes the URL to become more complex. Example URLs: * type="submit" * http://www.site.com/form.php?query=searchterm * type="image" * http://www.site.com/form.php?query=searchterm&x=0&y=0 Additionally, if you do not require additional information pertaining to the submit to be passed to the server (eg. you do not need to have two submits with different purposes), you can use a button element instead of an input. This also allows for simple hiding of the display text as outlined with the .hide-text class in this snippet (for if you wanted to put the text in the image instead). This solution has been tested to work in: * Microsoft Internet Explorer 6, 7, 8 * Mozilla Firefox 3.6 * Google Chrome 5 * Apple Safari 5 * Opera 10

Snipplr - karlhorky

(CSS) CSS: Submit Button Background Images