Difference between <input type='submit' /> and <button type='submit'>text</button>

Question

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>

Antiquary

Do you mean <input type="submit"> and <button type="submit">? – Turd

Possible duplicate of Difference between <input type='button' /> and <input type='submit' /> – Crock

input is a void element. Do not use <input />, just use <input>. – Rowen

@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). – Toneless

Does this answer your question? <button> vs. <input type="button" />. Which to use? – Singletree

Answer 1

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.

Nunnally

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 <input> and <button>: <input> has white-space:pre by default, <button> does not. This becomes apparent when attempting to make a button wider than the viewport. – Midvictorian

Answer 2

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

Optative

with <input type="image" /> you are not limited to text and it also performs a submit. – Nunnally

@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 <input type="submit"> with a CSS background if the sole purpose is to have a button with a background image. – Healing

@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. – Nunnally

@Abel: That was never been the intent of input type="image". For that the <button type="submit"> is intented. – Healing

@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 :) – Nunnally

When a pixel is chosen, indeed :) – Healing

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

Gloria