155

There are many legends about them. I want to know the truth. What are the differences between the two following examples?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>

Ninjakannon
  • 3,751
  • 7
  • 53
  • 76
James
  • 42,081
  • 53
  • 136
  • 161
  • 31
    Do you mean `` and ` – kennytm Aug 22 '10 at 22:02
  • 3
    Possible duplicate of [Difference between and ](http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit) – Hakan Fıstık Dec 07 '16 at 08:17
  • 1
    `input` is a void element. Do not use ``, just use ``. – CDT Jul 15 '17 at 14:47
  • @HakanFıstık, not a dup of that, been there, that's a (more or less subtly) different one, e.g. `type=submit` for `button` was not even a concern there (likely because it wasn't even part of the std. back then (AFAIK), when that other question was asked). – Sz. May 28 '20 at 19:17
  • Does this answer your question? [ –  Feb 11 '21 at 06:18

3 Answers3

124

Not sure where you get your legends from but:

Submit button with <button>

As with:

<button type="submit">(html content)</button>

IE6 will submit all text for this button between the tags, other browsers will only submit the value. Using <button> gives you more layout freedom over the design of the button. In all its intents and purposes, it seemed excellent at first, but various browser quirks make it hard to use at times.

In your example, IE6 will send text to the server, while most other browsers will send nothing. To make it cross-browser compatible, use <button type="submit" value="text">text</button>. Better yet: don't use the value, because if you add HTML it becomes rather tricky what is received on server side. Instead, if you must send an extra value, use a hidden field.

Button with <input>

As with:

<input type="button" />

By default, this does next to nothing. It will not even submit your form. You can only place text on the button and give it a size and a border by means of CSS. Its original (and current) intent was to execute a script without the need to submit the form to the server.

Normal submit button with <input>

As with:

<input type="submit" />

Like the former, but actually submits the surrounding form.

Image submit button with <input>

As with:

<input type="image" />

Like the former (submit), it will also submit a form, but you can use any image. This used to be the preferred way to use images as buttons when a form needed submitting. For more control, <button> is now used. This can also be used for server side image maps but that's a rarity these days. When you use the usemap-attribute and (with or without that attribute), the browser will send the mouse-pointer X/Y coordinates to the server (more precisely, the mouse-pointer location inside the button of the moment you click it). If you just ignore these extras, it is nothing more than a submit button disguised as an image.

There are some subtle differences between browsers, but all will submit the value-attribute, except for the <button> tag as explained above.

Abel
  • 56,041
  • 24
  • 146
  • 247
  • 1
    Since you've been editing anyway, the point about IE6 is still true with IE11 in quirks mode. (Yet another reason to not use quirks mode). Fixed in Edge though. Oh, and there are more differences between and – Mr Lister Sep 18 '18 at 10:34
20

With <button>, you can use img tags, etc. where text is

<button type='submit'> text -- can be img etc.  </button>

with <input> type, you are limited to text

Sparky
  • 14,967
  • 2
  • 31
  • 45
  • with `` you are not limited to text and it also performs a submit. – Abel Aug 22 '10 at 22:14
  • 2
    @Abel: that's more to create an image map which in turn sends the mouse pointer position as `name.x` and `name.y` parameters (note that the `name` parameter isn't present!). I'd rather use `` with a CSS background if the sole purpose is to have a button with a background image. – BalusC Aug 22 '10 at 22:18
  • @BalusC: True, but it's purpose, at the time of writing the HTML 2.0 standard, when there was no CSS, was, as described, to use an image as a button *or* as a server-side image map. But indeed, you can (ab)use a normal button with a background image to do the same with CSS and HTML. – Abel Aug 22 '10 at 22:26
  • @Abel: That was never been the intent of `input type="image"`. For that the ` – BalusC Aug 22 '10 at 22:29
  • 1
    @BalusC: perhaps we understand the standard differently, but this is in Lee's original text for HTML 2.0 standard: *"`TYPE=IMAGE' implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted."*. Make of it what you think is the real intent :) – Abel Aug 22 '10 at 22:31
  • When a pixel is **chosen**, indeed :) – BalusC Aug 22 '10 at 22:41
3

In summary :

<input type="submit">

<button type="submit"> Submit </button>

Both by default will visually draw a button that performs the same action (submit the form).

However, it is recommended to use <button type="submit"> because it has better semantics, better ARIA support and it is easier to style.

Juanma Menendez
  • 17,253
  • 7
  • 59
  • 56