Well once upon a time, there was the HTML 3 (or 3.2 depending on your view) which introduced forms including the input element and people where happy they had forms.
People quickly found the limitations of the input element, remember this is before CSS, styling was text and borders.
So people lobbied the W3C for an improved version of the input element and with HTML 4 came the button element.
And the W3C said Content providers can display rich HTML in any button source:http://www.w3.org/Press/HTML4-REC
Button and Input
The difference is the button element can contain other elements such as images
Otherwise
button type=“submit” is the same as input type=“submit”
button type=“reset” is the same as input type=“reset”
button type=“button” is the same as input type=“button”
type=“button”
Used if you want to add a Javascript action to a button or input element.
If you are a big believer in the input element. And nothing I say tonight changes your mind. the one thing I want you to take away
from this is use type=“button” when adding javascript action to a input element.
Appearance
You can control the appearance of the button element in all browsers unlike the input element. The example is at: nickcowie.com/other/button.html
Opera 8.51 has a little problem aligning the image on the button, do not know why. Hard to spot if it was not for the black background.
Opera 9 on the Mac does not have that problem and has pretty funky buttons until you style them.
Firefox and Mozillia on PC, Mac or Linux
Gecko engine browsers are pretty consistent, very little difference between Mozillia or Firefox, or Mac, PC or Linux OS
Camino on Mac, Safari 1.3/2 on Mac
Of course Camino is the exception, because it uses Apple's web kit. You can control the text size and overall size of the input element. But no control over the background.
Safari is the real challenge. The text size on the input element does not even change when increase the text size. The only thing you can control is the width of the input element.
position absolute required to position the span element absolutely in relation to the span and image.
width and text-align center to position text vertically
line-height to position text horizontally, not 2em, even though image is 2em high you want text sitting above middle of the image
using flash
using flash source code
Replace image tag with
<object type="application/x-shockwave-flash" data="images/button.swf">
<param name="movie" value="images/button.swf" />
<param name="wmode" value="transparent" />
</object>
.democ object{width: 4em; height: 4em;}
Internet Explorer unquie take on buttons
Even though the button has padding set to 0, IE magically gives the button some extra padding
If you have problems with how elements behave, add a one pixel border.
The button has 1px solid blue border
The Image has1px solid red border
The span has a 1px solid green border
Internet Explorer's extra padding
Internet Explorer from 4 to the current beta of 7 adds roughly
5% padding to the top
20 to 25% padding to the left and right
10% padding to the bottom
to each button element, this padding can not be removed.
Solution
Use conditional comments to serve extra stylesheet to Internet Explorer which moves the absolutely position span down the required 5% and across 20% or so. That is what I did here.
Does not look exactly the same across browsers, but that can be fixed with by absolutely positioning of the button element
Conditional comments is a way of feeding IE an extra stylesheet to counteract IE unique interpretation of the CSS specifications. I could give a whole presentation on conditional comments, so if you don't use them see: MSDN Library on Conditional Comments http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
When to use input instead of buttons
When your audience uses browsers that support HTML 3.2 but not HTML 4, Internet Explorer 3, Netscape 3 and Netscape 4.
(Button was one of the elements Netscape choose not to support with NS4)
Your audience is a bunch of Mac fanatics with good eyesight.
