¿Existe alguna diferencia entre ellos?
Sí, hay dos grandes diferencias:
<button>
te permite utilizar otras etiquetas para cambiar el formato del botón, mientras que<input type=button />
no te lo permite.
Ejemplo:
<button><h1>Texto grande!</h1></button>
<br>
<button><img src="https://cdn2.iconfinder.com/data/icons/basicset/tick_64.png"/> Con imagen</button>
<button>
se comporta como<input type="submit" />
cuando está dentro de una forma, mientras que<input type=button />
no.
Ejemplo:
<button> dentro de forma:
<form action="/test" method="get">
<button>Enviar</button>
</form>
<br>
<input type="button"> dentro de forma:
<form action="/test" method="get">
<input type="button" value="Enviar"/>
</form>
<br>
¿Habrá casos en los que se recomiende usar uno u otro?
Generalmente utilizarías <button>
para mejorar el contenido del botón sin tener que recurrir a CSS, aunque la realidad es que la mayoría de las veces terminarás utilizando CSS para estilizar tu botón.
<input type="button">
lo utilizarías más cuando quieres enviar una forma utilizando javascript, así evitarías la necesidad de utilizar preventDefault()
para evitar que la forma se envíe (como lo hace un <input type="submit">
).
¿Ocurre algo si se usan combinados en un mismo formulario?
Simplemente uno si enviará la forma (<button>
) y el otro no la enviará (<input type="button">
). Fuera de eso, no te afectará dentro de la forma.
¿Podría haber problemas de compatibilidad?
Podrías tener problemas con <button>
, pero únicamente exploradores viejos, como lo son IE6 o IE7.