Skip to main content
3 de 3
se añadieron 41 caracteres en el cuerpo
Gerry
  • 5.2k
  • 2
  • 14
  • 25

¿Existe alguna diferencia entre ellos?

Sí, hay dos grandes diferencias:

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

  1. <button> se comporta como <input type="submit" /> cuando está dentro de una forma, mientras que <input type=button /> no.

Ejemplo:

&lt;button&gt; 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>

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

Gerry
  • 5.2k
  • 2
  • 14
  • 25