Which tag should I use to best create a button?

1

Would somebody kindly explain the difference between: input type=“submit” and button type=“submit” and when to best use the two?

Also, my HTML textbook by Jon Duckett doesn’t include the type attribute on the button element, whereas FCC does, so that is confusing as well.

Thanks all in advance!

2

Taken from MDN entry for button:

<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute.

IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>, the POST data sent will result in myButton=Click me instead of myButton=foo.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.

2 Likes
3

Thank you! I didn’t realize this resource existed. Many thanks.

1 Like
4

Oh, MDN is your best friend!

1 Like