Proper way to use Image Button in Form

Thanks for the detailed response, Paul!

You make it sound like you have to have an image slice that is twice as high as my original button that you chopped up?! (Isn’t that how sprites work?)

Debbie

I have Fireworks and Photoshop but I mainly use fireworks for web work as it is easier. However, there are many free paint packages that will do the job for you although they won’t have all the bells and whistles. Have a search in the graphics forum for some free graphics tools and you should find something suitable.

Also…
How do you know how wide to make the slice?

The slice can be 1px wide but that means the browser has to draw it hundreds of time to make the whole button and slows the browser down. Therefore making it 5px or 10px wide will increase performance tenfold with little increase to the actual filesize. I always avoid 1px gifs and usually use something like 5px or 10px approx.

Why doesn’t the slice create square edges at the ends?

It does make square ends but I added border-radius properties for IE9+ and other modern browsers. You can grab the code easily [URL=“http://border-radius.com/”]from here. As I mentioned above ie8 and under get square corners because it would take too much effort to give them round corners as well.

Okay, drilling down into your Style-Sheet some more…


#submit{
border:1px solid #326985;

So you can add a border to the button?

Yes you can style most properties for the input button unlike other form controls such as selects. You can change the border, background, colour, padding and margins etc.

(I’m used to letting CSS or my Browser create the button, which is probably my aversion to the “factory look”…)

Yes buttons have a default look and some people say you shouldn’t change it but I think that as long as you make it obvious its a button then its ok to a degree.

BTW, what exactly is the correct name for the button in the INPUT tag?

The submit button is merely an input of type=“submit”. How it looks by default is solely down to the browser concerned.


height:29px;
line-height:27px;
padding:0 10px;

I had NO CLUE you could mark up the TEXT and BUTTON like this… :eek:

Yes you can set height ,width and padding as mentioned before.

So “height” is the Button’s Height?
And “line-height” is the Text’s Height?

Yes the height is the buttons height and when you set line-height to the same as the height you effectively vertically center the text. The submit button uses the old box model so you have to account for borders and padding inside the dimensions.

What do these two lines do??


width:auto;
overflow:visible; 

The width ensures that the browser hasn’t applied a default width (although I don’t think any actually do) but I add it just in case.

The overflow:visible is to cure a bug in IE7 and below where the width of the button is very wide. It’s a nonsense fix because it should make no difference but for iE7 and under it fixes the problem.

What is the 0 0 at the end?

That is the background-position for the image and makes it start at left top i.e. 0 0. The default is 0 0 anyway and can be omitted if you want to save bytes.

What does these lines do???


-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; 

(Are they well-supported??)

As mentioned before they provide the corners for ie9+ and all other modern browsers. With the vendor prefix added they have support in Firefox and safari going way back.

IE8 and under have no support but with ie10 due out next year there seems little need to mess your mark up for outdated browsers.

Is this a margin for the TEXT or the BUTTON??

That is the margin for the button just like any other element. The text is inside the button and is controlled by padding or text-alignment just like any text content.

What do these lines do?? (Almost looks like JavaScript?!)


#submit:hover{background-position:0 -27px}

No, that’s just basic css and on hover you swap the position of the background image to show the reversed gradient. By pulling the background-position of the image upwards by 27px the bottom half of the sprite is shown for the rollover effect. This is a common technique for rollover images and avoids any delay in loading a new over state because the image is already loaded because it is the same image. That is the basis for all sprite images (google css sprites).

Paul,

You are OUT-OF-THIS-WORLD in your knowledge and skills!! :tup:

What tool do you use to do that?

Any way to do that for people without $$/Photoshop?

Also…

How do you know how wide to make the slice?

Why doesn’t the slice create square edges at the ends?

The image is then just added to the background of the input as per normal. The text is just browser text from the value attribute of the input also like normal so there are no accessibility issues.

That is nice.

This will work more or less everywhere except that ie8 and under will have square corners while everyone else gets the nice round corners (and ie6 doesn’t get the hover effect either).

Okay.

That’s the approach I would take anyway as this allows you to use it multiple times with different text without having to make new images./quote]

Yeah, that would be great!

[quote]Lastly if css is off or images are missing you still get a usable button.

Good to know.

Okay, drilling down into your Style-Sheet some more…


#submit{
border:1px solid #326985;

So you can add a border to the button?

(I’m used to letting CSS or my Browser create the button, which is probably my aversion to the “factory look”…)

BTW, what exactly is the correct name for the button in the INPUT tag?


height:29px;
line-height:27px;
padding:0 10px;

I had NO CLUE you could mark up the TEXT and BUTTON like this… :eek:

So “height” is the Button’s Height?

And “line-height” is the Text’s Height?

width:auto;
overflow:visible;

What do these two lines do??

background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;

What is the 0 0 at the end?

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

What does these lines do???

(Are they well-supported??)

margin:20px 0 10px 100px;
}

Is this a margin for the TEXT or the BUTTON??

#submit:hover{background-position:0 -27px}

#submit:hover{background-position:0 -27px}

What do these lines do?? (Almost looks like JavaScript?!)

Sorry for all of the questions, but I want to learn what all of your code does so I can become a better web developer!!! :angel5:

Thanks a bunch for your help so far!!!

Debbie

Wow! That looks really impressive, Paul! :slight_smile:

Although, I’m not sure how you got that fancy button… :-/

I don’t think that is the same image I uploaded, is it?

It almost looks like you are doing some fancy JavaScript stuff or something?

Trying to figure out this code…


#submit{
border:1px solid #326985;
height:29px;
line-height:27px;
padding:0 10px;
width:auto;
overflow:visible;
background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;
color:#fff;
font-size:12px;
text-align:center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;	
margin:20px 0 10px 100px;
}
#submit:hover{background-position:0 -27px}

#submit:hover{background-position:0 -27px}

Can you please help me understand what is going on here?

And, how supported is what you did?

I see this awesome button that looks pretty much like mine, but it’s even better because when you hover over it, the gradient switches making it look like a regular non-application.

It looks good on my MacBook with FireFox 3.6.21, but I have no clue how it would look/work in Windows or Internet Explorer - which are always big concerns of mine since a.) I don’t have access to Windows and IE, and 2.) I try to build sites that are widely supported and accessible.


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

I think I follow this code… :wink:

Debbie

Hi,

I cut a gradient slice from the actual image you uploaded to make this repeating image sprite. I reversed the gradient to make the hover effect and it’s all on the same image.

The image is then just added to the background of the input as per normal. The text is just browser text from the value attribute of the input also like normal so there are no accessibility issues. This will work more or less everywhere except that ie8 and under will have square corners while everyone else gets the nice round corners (and ie6 doesn’t get the hover effect either).

That’s the approach I would take anyway as this allows you to use it multiple times with different text without having to make new images.

Lastly if css is off or images are missing you still get a usable button.

Well as already has been discussed you can use an input (or a button element) so it’s really just a matter of styling.

I would do it like this (I just tacked it on to an old demo so ignore the rest):


#submit{
border:1px solid #326985;
height:29px;
line-height:27px;
padding:0 10px;
width:auto;
overflow:visible;
background:#3181bc url(images/buttongradient.gif) repeat-x 0 0;
color:#fff;
font-size:12px;
text-align:center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;	
margin:20px 0 10px 100px;
}
#submit:hover{background-position:0 -27px}

#submit:hover{background-position:0 -27px}


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

I just want the option to create a “Submit” button that is a image (e.g. png) so that it matches all of the other buttons on my website.

In my opinion it makes your website look unbalanced to use image buttons for non-form purposes, but then to use the standard (built-in) buttons for forms.

See attached…

Debbie

lol - I think you’re right:)

I think we’re splitting hairs here :slight_smile:

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.

Which brings me back to my original question then what is the benefit.:slight_smile: 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 :)).

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.

I assumed we were talking about background images :slight_smile:

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?

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.

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

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.

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.

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

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.

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

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