The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Image Submit Button

Hi to all members,

I have a question about an image submit button. I use an input class using CSS..<input class="formButton" type="submit" name="submit" value="submit" />
and when I checked to see on my browser..it displayed the word submit over my image button.. so then I tried to omit the value as.. value="" ..now it shown the word "Submit Query" instead...what should I do to get rid of the word Submit on my Image Submit Button..

I find using type a bit annoying as I have to emulate the "press effect". Otherwise user has no clue that he successfully press the button leading him to submit the form multiple times.
So you have to attach some light shifting through position relative.
Personally I'm having <button> with a span inside to trigger the browser to move it itself when pressed.

Usually when I'm using image it's not something that has that "pressable" look (like a magnifying glass on a search bar). But once I had a tomato button and I could use sprite-image-replacement to slide a new form of tomato on hover/focus, and a third form on :active. Though if it's a square image you usually can get away with adding a right and bottom border on :active, depending on design.
Moving it with relative positioning is a good idea, I hadn't thought of that.

Otherwise user has no clue that he successfully press the button leading him to submit the form multiple times.

I agree the user generally should get some visual feedback, though I also believe if someone is clicking submit on something, then the page should change somewhere as well. If a form was submitted, redirect them (post-redirect-get) to a "thanks, it worked" page or some such thing, or replace the area where the form was with some sort of message (I'm sure you do something similar).
I know of at least one person (yes, older) who doesn't notice/see the more subtle things like the press effect, and she has gotten confused when no results showed (or there was only a small change in a top header box).

The only thing I occasionally do is after submitting once to cover the form with semi-transparent div, unfocus the elements and set their tab index to "-1" so you can't reach them as I can't assure that everything will be valid and processed correctly so in the very moment of submitting to show "Thank you".
But truth is 90&#37; percent of "fancy" design (whether minimalistic or colossal images and fonts) completely ingnore the feedback.
I've seen so much forms with styled buttons and while doing this they've set custom padding, which firstly ruins the "pressable" button, and secondly they don't reintroduce it.
The results is flat one-colour buttons which don't ever change in either of phases or the better case of of at least button shaped but again does not change in any particular moment of mouse or keyboard action.

I've seen so much forms with styled buttons and while doing this they've set custom padding, which firstly ruins the "pressable" button, and secondly they don't reintroduce it.

Yeah, I've seen something similar, due to Eric Meyer's reset being so popular: people let the reset remove outline, but then don't heed the warning to reintroduce it or something similar when necessary. Which is why I feel it dangerous to remove them globally... better to have outlines removed by hand when it's too ugly on any particular element, and replace it right then and there with something else.