input type="button" / vs. button in HTML

Translated from the W3C , it's from the html4 documentation but still It is valid:

  

Buttons created with the BUTTON feature function the same as buttons created with the INPUT element, but offer richer rendering possibilities

Responding to your questions:

Is there a difference between them?

  

Yes, its purpose is the same to launch an action, we could even include the <a></a> between them as well. Its main difference goes more by the styles. the form and the purpose.

     

• input : Allows you to create a simple button that can only include text in its attribute value and is what is shown on the button.
  
• button : It allows to create a button but with html inside, that is you can include icons, images, etc.
  
• to : It allows to include html inside, icons and images, as if it were a button but by definition the links should take you to another side (it can be content brought by ajax) while the buttons must perform a task .
  

Will there be cases in which it is recommended to use one or the other?

  

Yes, as I mentioned in the differences, basically for aesthetic reasons.

Does something happen if combined are used in the same form?

  

No, you can use them interchangeably, even without a form. Both can be used outside the form without problems.

Could there be compatibility problems?

  

No, there would be no problem, both are part of the html standard and they are just like two different elements, that is, if the other html rules should be respected as they should not repeat the id.

  

Is there a difference between them?

Yes, there are two big differences:

Example:

<button><h1>Texto grande!</h1></button>
<br>
<button><img src="https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png"/> Con imagen</button>

Example:

<button> dentro de forma:
<form action="/test" method="get">
  <button>Enviar</button>
</form>
<br>

&lt;input type="button"&gt; dentro de forma:
<form action="/test" method="get">
  <input type="button" value="Enviar"/>
</form>
<br>

  

Will there be cases in which it is recommended to use one or the other?

Generally you would use <button> to improve the content of the button without having to resort to CSS , although the reality is that most of the time you will end up using CSS to stylize your button.

<input type="button"> you would use it more when you want to send a form using javascript , thus avoiding the need to use preventDefault() to prevent the form from being sent (as a <input type="submit"> does).

  

Does something happen if combined are used in the same form?

Simply one will send the form ( <button> ) and the other will not send it ( <input type="button"> ). Outside of that, it will not affect you within the form.

  

Could there be compatibility problems?

You might have problems with <button> , but only old browsers, such as IE6 or IE7 .

This question was already asked in the stackoverflow in English and a user recommended a very good link that explains it in detail and with images.

Rediscovering the button element

The good thing about the button tag is that it's a tag that needs to be closed, so you can enter HTML inside them, like for example, an image. In turn, CSS styles can be applied in a more optimal way and create more interactive and fluid buttons for the user.

In conclusion, that the button tag gives you a broader list of possibilities than your alter-ego input.