Proper way to use Image Button in Form

[DoubleDee]

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

[xhtmlcoder]

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]

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?

[DoubleDee]

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?

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]

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]

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]

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.

[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.

[DoubleDee]

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]

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]

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?

#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;
}

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

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?

#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.

[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.

[Paul O'B]

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]

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]

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]

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.

[Paul O'B]

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.

[DoubleDee]

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

[xhtmlcoder]

I assumed we were talking about background images [...]

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.

[xhtmlcoder]

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'.

[xhtmlcoder]

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.

[adh32]

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.