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>

5
  • 31
    Do you mean <input type="submit"> and <button type="submit">?
    – kennytm
    Aug 22, 2010 at 22:02
  • 3
  • 1
    input is a void element. Do not use <input />, just use <input>.
    – CDT
    Jul 15, 2017 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, 2020 at 19:17
  • Does this answer your question? <button> vs. <input type="button" />. Which to use?
    – user12260140
    Feb 11, 2021 at 6:18

3 Answers 3

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.

1
  • 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 <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.
    – Mr Lister
    Sep 18, 2018 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

6
  • with <input type="image" /> you are not limited to text and it also performs a submit.
    – Abel
    Aug 22, 2010 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 <input type="submit"> with a CSS background if the sole purpose is to have a button with a background image.
    – BalusC
    Aug 22, 2010 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, 2010 at 22:26
  • @Abel: That was never been the intent of input type="image". For that the <button type="submit"> is intented.
    – BalusC
    Aug 22, 2010 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, 2010 at 22:31
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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.