Proper way to use Image Button in Form

**DoubleDee** · Sep 2, 2011 10:40

What is the proper/best syntax to use if I want to use an image for my Submit button on a Form?

Standard Way:

Code HTML4Strict:

<input type="submit" name="addComment" id="addComment" value="Add a Comment"/>

My Way:

Code HTML4Strict:

<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:

Code HTML4Strict:

<input type="image" src="<?php echo WEB_ROOT . 'buttons/AddAComment3.png' ?>" />

Debbie

**xhtmlcoder** · Sep 2, 2011 12:11

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?

**TheRaptor** · Sep 2, 2011 12:16

Why not this

Code HTML:

<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?

**DoubleDee** · Sep 2, 2011 16:53

Originally Posted by TheRaptor

Why not this

Code HTML:

<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?

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

**webdev1958** · Sep 2, 2011 17:06

Originally Posted by DoubleDee

I thought <button> was some new fangled - read "largely unsupported" - tag?

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.

**DoubleDee** · Sep 2, 2011 17:49

Originally Posted by webdev1958

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.

According to SitePoint, <button> is "buggy" for all versions of Internet Explorer, so its use sounds like bad advice...

Debbie

**webdev1958** · Sep 2, 2011 17:51

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.

**DoubleDee** · Sep 2, 2011 18:43

Originally Posted by webdev1958

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.

http://reference.sitepoint.com/html/...ibilitysection

Debbie

**webdev1958** · Sep 2, 2011 19:46

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.

**DoubleDee** · Sep 2, 2011 20:57

Originally Posted by webdev1958

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.

Does anyone else agree with what webdev1958 is saying?

Paul O'? Rayzur? Stomme? DeathShadow?

Debbie

**webdev1958** · Sep 2, 2011 21:08

This works in at least IE7+

Code:

<!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

**webdev1958** · Sep 2, 2011 21:13

Originally Posted by DoubleDee

Does anyone else agree with what webdev1958 is saying?

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.

**Paul O'B** · Sep 3, 2011 07:11

The most accessible and least problematical would be to use a background image on the input type="submit" with image replacement technique like this.

That avoids any issues with multiple buttons etc.

**DoubleDee** · Sep 3, 2011 08:14

Originally Posted by Paul O'B

The most accessible and least problematical would be to use a background image on the input type="submit" with image replacement technique like this.

That avoids any issues with multiple buttons etc.

Does that mean I can use any image I want?

Is that approach satisfactory to you for someone who wants to use an image?

Debbie

**Paul O'B** · Sep 3, 2011 09:05

Originally Posted by DoubleDee

Does that mean I can use any image I want?

Is that approach satisfactory to you for someone who wants to use an image?

Debbie

Yes you can use any image you want.

The technique above allows for images or css on/off and is still usable while all the time preserving the original input buttons function especially the value field which supplies the text for the input even though you don't see it.

The downside is the slight complexity in setting it up and that that you need to use the extra label element to hold the visible text content for when images are missing. You could do without the label and then hide the text with text-indent but that would fail in an images off and css on scenario.

**DoubleDee** · Sep 3, 2011 09:19

Paul,

I didn't exactly follow your example.

I just want a simple image button with no JavaScript.

Can I get by with just this code?

Code CSS:

#form1 .submit input{
	width:150px;
	height:25px;
	border:none;
	background:url(images/input-test.gif) no-repeat 0 0;
	text-transform: capitalize;	/* IE needs this to hide text */
	text-indent:-999em;
	display:block;
	overflow:hidden;
	margin:0 auto;
}

Code HTML4Strict:

<form id="form1" method="post" action="">
	<div>
		<label for="t1">Name: </label>
		<input type="text" name="t1" id="t1" />
	</div>
	<div class="submit">
		<label for="submit">Submit </label>
		<input type="submit" id="submit" name="Submit" value="Submit" />
	</div>
</form>

Debbie

**Paul O'B** · Sep 3, 2011 10:07

Originally Posted by DoubleDee

Paul,

I didn't exactly follow your example.

I just want a simple image button with no JavaScript.

Can I get by with just this code?

Code CSS:

#form1 .submit input{
	width:150px;
	height:25px;
	border:none;
	background:url(images/input-test.gif) no-repeat 0 0;
	text-transform: capitalize;	/* IE needs this to hide text */
	text-indent:-999em;
	display:block;
	overflow:hidden;
	margin:0 auto;
}

Yes you can just use the above code and it will work unless images have been turned off. In my example the input is placed on top of the label text and so provides a fallback should images be missing.

It's not really that complicated you just place the input on top of the text as in in the usual gilder/levin image replacement techniques.

**webdev1958** · Sep 3, 2011 14:28

If you have a single button per form and/or multiple buttons per form but don't have to support IE6- then you can do the same thing with less html and css using a <button>

**Paul O'B** · Sep 4, 2011 03:05

Originally Posted by webdev1958

If you have a single button per form and/or multiple buttons per form but don't have to support IE6- then you can do the same thing with less html and css using a <button>

Yes but what happens when images are not loaded or missing if you are using an image for the button? I see no advantage at all when using an image for a submit button as the input type=submit is perfect for the job. The only use I see for the button element is for multi line text content.

**webdev1958** · Sep 4, 2011 03:25

Originally Posted by Paul O'B

Yes but what happens when images are not loaded or missing if you are using an image for the button?

Obviously no bg image would appear but the text in the button still would and the button would still work.

The point I was originally making was that <button> is a valid option and that DD's statement

Originally Posted by DoubleDee

According to SitePoint, <button> is "buggy" for all versions of Internet Explorer....

is simply not true (as shown in post 11).

And like I said earlier, DD should use whichever button type she is most comfortable with.

**xhtmlcoder** · Sep 4, 2011 04:07

The BUTTON also allows emphasis unlike submit and has richer rendering but the BUTTON element type allows other content (not just IMG) assuming the image doesn't load the 'alt' attribute would be displayed as text for the button.

**Paul O'B** · Sep 4, 2011 04:28

Originally Posted by xhtmlcoder

The BUTTON also allows emphasis unlike submit and has richer rendering but the BUTTON element type allows other content (not just IMG) assuming the image doesn't load the 'alt' attribute would be displayed as text for the button.

I assumed we were talking about background images

My point was that in normal practice the input type="submit" would be used to send the form which all browsers understand without extra work so why the need to change it if all that is required is an image. Where is the benefit in this case?

**webdev1958** · Sep 4, 2011 05:29

Originally Posted by Paul O'B

Where is the benefit in this case?

I don't see any disadvantage in using <button> if you have only a single submit button per form. The submit will still work if the image is missing whether you use <button> or a an <input> with type=submit. If you have multiple submit buttons per form then <button> is only an issue if supporting IE6-.

If that is the case then there is no difference which type of button is used.

**Paul O'B** · Sep 4, 2011 06:13

Originally Posted by webdev1958

I don't see any disadvantage in using <button> if you have only a single submit button per form. The submit will still work if the image is missing whether you use <button> or a an <input> with type=submit. If you have multiple submit buttons per form then <button> is only an issue if supporting IE6-.

If that is the case then there is no difference which type of button is used.

Which brings me back to my original question then what is the benefit.

Why change something that works in any circumstance for something that will break in certain circumstances?

You only have to read the comments here to see the problems users have had in older IE.

By all means use the button element when you have no choice but when you are not gaining any benefit then there seems no point to me unless I'm misunderstanding something important (which won't be the first or last time I've got the wrong end of the stick

).

**webdev1958** · Sep 4, 2011 06:21

I think we're splitting hairs here

I'm not trying to tell anyone which type of button they must or should use. I'm just highlighting the fact that unless you are supporting IE6- then there is no major difference between using <button> or <input type="submit />.

As you alluded to before and as xhtmlcoder said, <button> gives you more flexibility in the buttons content and styling, but other than that it makes no difference which type of button is used unless IE6- needs to be supported and there are multiple submit <button>s per form.

User Tag List

Thread: Proper way to use Image Button in Form

Thread Tools

Display

Proper way to use Image Button in Form

Bookmarks

Bookmarks

Posting Permissions