What is the proper/best syntax to use if I want to use an image for my Submit button on a Form?
Standard Way:
<input type="submit" name="addComment" id="addComment" value="Add a Comment"/>
My Way:
<a href="<?php echo WEB_ROOT . 'add_comment2.php' ?>">
<img src="<?php echo WEB_ROOT . 'buttons/AddAComment3.png' ?>" alt="Add a Comment" />
</a>
Someone’s Suggested Way:
<input type="image" src="<?php echo WEB_ROOT . 'buttons/AddAComment3.png' ?>" />
Debbie
Have a read of the link you posted.
An extract from it:
In IE versions 6 and earlier, if you have several buttons with the same name but with three different values and text displayed inside the button to the user (see code sample below), it does not matter which button is pressed, data from all three are passed through, rather than just the button that is pressed (IE7, IE8 only submit the data from the button pressed).
IE7+ submits data just from just the pressed submit button which is the way it should be.
Does anyone else agree with what webdev1958 is saying?
Paul O’? Rayzur? Stomme? DeathShadow?
Debbie
This works in at least IE7+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn1 {
width: 200px;
height: 300px;
background-image: url('btn0.jpg');
border: none;
}
#btn1:hover {
background-image: url('btn1.jpg');
}
</style>
</head>
<body>
<form action="formProcessor.php" method="post">
<input type="text" name="txt1" />
<button id="btn1" type="submit"></button>
</form>
</body>
</html>
but as I said, use whichever type of button you are most comfortable with 
In that link they are talking only about IE up to IE8.
They are also talking about the situation where there could be problems if you have multiple submit <button>'s in a form and you want to send the value to see which button was clicked. If you have only 1 submit button per form then it is not an issue.
As I said, I use <button> quite a bit and I don’t have any problems with it.
Like a lot of aspects of building a web site, there will be limitations with all sorts of things and as long as you know how things work and the workarounds then you shouldn’t have any major problems.
But to answer your question, use whichever type of button you are most comfortable with. All the buttons will do what you want.
According to SitePoint, <button> is “buggy” for all versions of Internet Explorer, so its use sounds like bad advice…
Debbie
not at all.
<button> has been around for ages. You can give it a background image in the css or add an <img> to it, whichever suits your needs.
And what would the “appropriate CSS” be?
I thought <button> was some new fangled - read “largely unsupported” - tag?
Regardless, I want to use an image for my buttons.
Debbie
I use it quite a lot and have no problems with it. I support IE7+ and the other major browsers.
Can you post some code where you claim it will be buggy.
Why not this
<a href="<?php echo WEB_ROOT . 'add_comment2.php' ?>">
<button type="button">Submit</button>
</a>
with the appropriate CSS to replace the text with an image?
Certainly not the last way for starters that’s inaccessible the second is just a image and the first is a submit button function perhaps you are really after BUTTON?
Regarding focus styles, I like to go bold. Something like:
a:focus, input[type=submit]:focus, etc. { outline: 2px solid #ffaa00 }
a:focus:active, etc. { outline: 0 }
The 2nd line is just what I do for browsers (e.g. Ffox) that show focus styles while clicking elements.
What do these lines do??
You must be very new to CSS.
It’s probably the focus; if you want to make is extremely HARD and inaccessible for people who use keyboards to navigate your page then remove it… Otherwise think very carefully and leave it be (yes you can remove it) but like I said, it might be unwise to do so for obvious reasons.
Paul, my Form Submit Buttons and Standalone Buttons look great!
Thanks!!
One small annoying thing, though…
When I tab on to a button, I get this annoying dotted box around the text.
Is there a way to eliminate that?
Debbie
Technically if the text does go over two lines then yes BUTTON is used. Really BUTTON was created for containing richer content not just wrapping text or using an IMG whereas INPUT cannot contain content as it’s EMPTY. However, in 1999, CSS support in some mainstream browsers was let’s say very ‘iffy’.
unless the submit button has text that expands over 2 or more lines. If so, then <button> must be used, right?
Wasn’t <button> created for <input type=“submit” /> that contained text that expanded at over multiple lines?
Irrelevant background decoration and nothing to do with the control; if you need a image to convey meaning or other content then you’d use BUTTON that is all I was explaining. I know what you were getting at; if you just want to style a button (and the image content doesn’t matter one iota) then use CSS, its horses for courses. I’ve already mentioned the benefits or more correctly the appropriate usage or contextual differences.
Hi,
You can turn anchors into the same buttons with basically the same routine.
Here’s an example.
It’s more or less the same code with the text-decoration and inline block properties added.
Paul,
So I was able to implement your code and suggestions and things look really nice!!
However, one small problem…
I have pages with buttons on them that are not currently associated with a form.
For example, after a person leaves a comment, I post a confirmation message and then give them the ability to “Return to Article” or “Go to Home Page” as seen in Post #27 above.
Is there a way to implement you awesome solution with these non-form-based, standalone buttons?? :-/
(Since you created the sprite from my original buttons, there really isn’t any way to tell whether a button uses your sprite-approach or is an image button - except for the hover-over behavior. So, I suppose I could keep using my image buttons in cases like this, however, if I can implement your solution site-wide, that would be the best!)
Thanks,
Debbie