Using Image for Submit Button

HTML & CSS
1

Is it okay to use an image for a “Submit” button on a form?

If so, how do I do it so this code still works…


// *****************************************************
// HANDLE FORM.
// *****************************************************
if (isset($_POST['submitted'])){

Thanks,

Debbie

2

Does this look correct…


<!-- Submit Form -->
<fieldset id="submit">
	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" value="Place Order" />
	<input name="submitted" type="hidden" value="true" />
</fieldset>

If so, do I need the last part…


 value="Place Order" />

Thanks,

Debbie

3

The text of an input type=“image” is actually an alt, like an image.

<input type=“image” src=“path/to/image.png” alt=“Place Order” />

Value would be correct for a type=“submit”, but not type=“image”.

You do need the alt: you have no guarantees that any particular user has loaded that image, or can see it (the usual).

[noparse]http://www.w3.org/TR/html401/interact/forms.html#h-17.4[/noparse]

4

What’s the purpose of the hidden input? In your example it will always be “true” so I’m not sure what you were trying to accomplish.

The image submit button is a bit weird in that it doesn’t need the “value” attribute. You can use it but its support in browsers is inconsistent. In your example Firefox would send the “submit” variable with the value “Place Order” but IE would not so you can’t rely on that.

However, every browser will send mouse position for the clicked image button. If your button’s name is “submit” then browsers will send these variables to the server:

submit.x = 0
submit.y = 0

Of course, the zeroes will be substituted with actual coordinates. What you need to bear in mind is that php will convert . to _ in $_POST keys so in fact you will get these:

submit_x = 0
submit_y = 0

So using this information you can use many image submit buttons with different names and create php code that will recognize which button was pressed. It’s a bit convoluted but can be done - you have to loop over all $_POST variables with foreach() and detect the presence of keys having the names of your input elements suffixed by either _x or _y.

5

Not everyone selects submit buttons with a mouse.

6

Doesn’t matter. You still get mouse coordinates of x=0 and y=0.

7

Yes, absolutely. This helps you show proper elements when pages are rendered with images or css.
You can get around this by putting the following in the css -

text-indent: -9999px;
8

Uhm… minor nitpick – input[image] doesn’t use value for images off degradation, it uses ALT just like IMG does. Using ‘value’ doesn’t do anything useful – well, except for submitting that value under the ‘name’ (if any).

INPUT - Form Input

… and I quote:

VALUE=CDATA (value of input)

ALT=CDATA (alternate text for image input)

Generally unless there are going to be multiple submits, there is no reason to put value on one. Just like there’s no legitimate reason to put NAME on a FORM or TITLE on a IMG.

9

Am I only coming through in waves? My lips move, but you can’t hear what I’m saying?

there is no pain, I am receding… a distant ship-smoke on the horizon…

10

I think I glossed over your post for two reasons…

  1. TSDR – too short didn’t read. I’ve got a NASTY case of that lately. (the opposite of 99% of the world)

  2. You posted an img tag, instead of code actually related to the solution.

11
  1. You posted an img tag, instead of code actually related to the solution.

wut?

I dun’t see no images there. Teh Debster’s definitely got an input type=image right??

TSDR – too short didn’t read.

I can add some obfuscatory loquacious bloat to my posts if you want: that’s always fun, esp after some whisky.

12

Why not just cut and paste portions of someone else’s posts? It could become the sitepoint equivalent of “lorem ipsum…”

13
Off Topic:

Cause that’s not cool, that’s plagarism. I can bloat with the best of them. Esp when I’m full of alcohol. Just exploded some keyboard diahrrea over at design-something.

14

You could also use a normal submit button and then use an image replacement technique so that images/off/on css off/on still works.

(I think Jason also had a similar version of this when we discussed this before.)

15

Lots of opinions and directions… :-/

Sounds like this is a good mix??


<!-- Submit Form -->
<fieldset id="submit">
	<input name="submit" type="image" src="../images/PlaceOrder_bk.png" alt="Place Order" />
	<input name="submitted" type="hidden" value="true" />
</fieldset>

BTW, thanks for the code Paul, but I like to avoid JavaScript and also prefer my JPEG button.

Thanks,

Debbie

16

I was using a wrapper, overflow:hidden on the wrapper, and a double-tall input[image] I was sliding around. The approach you posted uses text-indent on the input, something I would never do.

I thought when we were talking hovers on inputs before we had come up with a technique that used input’s tendency to behave as if it’s on top regardless of how it’s rendering to our advantage, but for the life of me I can’t remember how that worked.

17

This mix will work very well. The only thing is that no mix is necessary because:

  1. The hidden field is redundant.
  2. Unless you plan to have multiple submit buttons, the name attribute on the button is also redundant.
  3. I would suggest not using the same “submit” value for the id on fieldset and name on the input. It’s not technically wrong but I’ve had cases when IE had problems with it. You may not experience them in your case but it’s better to stay away from such solutions just to be safe.

BTW, thanks for the code Paul, but I like to avoid JavaScript and also prefer my JPEG button.

Paul’s solution doesn’t use javascript and you can use your JPEG for the button.

18

Yes but it doesn’t really matter as the input lies on top of the text in the label so the text is always available even when images are missing. It works with images off and/or css off etc. Not the neatest of methods I agree :slight_smile:

As Lemon Juice said it works without javascript and you can use the same image. The js in that demo was for a hover effect in ie6 and not needed for the image replacement.

However, I will admit it is a bit of a convoluted method but useful if you already have things set up for submit buttons etc.

19

I looked at your code but am not getting where the image comes in and what you mean by “over/under-technique”…

Debbie

20

Paul’s method works well (with/without JS) in allowing the user to see the submit button even with images/CSS off, but one of the requirements of the technique is to make sure the actual CSS sprite/image being used is larger than the label hidden behind it.

Having a small 20x20px window with a transparent GIF (eg. a magnifying glass icon used for a search field submit button) and a label of “Search” wouldn’t look good as the label would show through on a normal CSS/images-enabled browser.

Inside Vancouver Blog | a blog about Vancouver, by Vancouverites

The “go” button in the top right is an example of where I used Paul’s method for a client, but had to change the label text from “Search” to “go” and push it a bit to the right so it wouldn’t peek through.