5

Actualmente estoy trabajando con formularios HTML, algunos de ellos recogen datos y los envían al servidor para consultar o actualizar datos en una base de datos remota MySQL.

He visto que los botones para iniciar acciones pueden ser declarados como:

  • <button>

o como

  • <input type="button" />

Probando una posibilidad o la otra realizan la misma función, así que me surgieron algunas dudas, todas ellas relativas a crear formularios con los elementos más adecuados para cada caso.

¿Existe alguna diferencia entre ellos?

¿Habrá casos en los que se recomiende usar uno u otro?

¿Ocurre algo si se usan combinados en un mismo formulario?

¿Podría haber problemas de compatibilidad?

Son varias preguntas, pero supongo que las respuestas no serán tan amplias.

3
  • 2
    Habría jurado que esta pregunta ya se había hecho en Stack Overflow en Español. [Edición] Hay una pregunta muy parecida que hizo dwarandae, pero realmente no son iguales
    – Alvaro Montoro
    Commented el 18 jun. 2017 a las 22:42
  • 1
    Pero... la comunidad de programadores hispana tiene también, derecho a buenas respuestas en el idioma de Cervante. @CarlosGª-muñoz
    – A. Cedano
    Commented el 20 jun. 2017 a las 11:09
  • 1
    @a-cedano pues tiene toda la razón del mundo... Que viva Cervantes y a postear!
    – Charly
    Commented el 21 jun. 2017 a las 7:43

3 respuestas 3

7

Traducido desde la W3C, es de la documentación de html4 pero aún es válida:

Los botones creados con la función de elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen posibilidades de renderización más enriquecidas

Respondiendo a tus preguntas:

¿Existe alguna diferencia entre ellos?

Si, aunque su finalidad es la misma, lanzar una acción(incluso podríamos englobar los <a></a> entre ellos también.) La diferencia principal va más por los estilos, la forma y la finalidad.

  • input: Permite crear un simple botón que solo puede incluir texto en su atributo value y es lo que se muestra en el botón.
  • button: Permite crear un botón pero con html dentro, o sea puedes incluir iconos, imágenes, etc.
  • a: Permite incluir html dentro, iconos e imágenes, como si fuera un botón pero por definición y semántica los enlaces te deben llevar a otro lado(puede ser contenido traído por ajax) mientras que los botones deben realizar una tarea.

¿Habrá casos en los que se recomiende usar uno u otro?

Si, como mencioné en las diferencias, básicamente por cuestiones estéticas.

¿Ocurre algo si se usan combinados en un mismo formulario?

No, puedes usarlos de forma indistinta, incluso sin un formulario. Ambos se pueden usar fuera del formulario sin problemas.

¿Podría haber problemas de compatibilidad?

No, no habría ningún problema, ambos son parte del estándar de html y solo son como dos elementos diferentes, eso si se debe respetar las demás reglas de html como que no deben repetir el id.

5

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

2

Esta pregunta ya la hicieron en el stackoverflow en inglés y un usuario recomendó un enlace muy bueno que te lo explica detalladamente y con imágenes.

Rediscovering the button element

Lo bueno de la etiqueta button es que es una etiqueta que necesita cerrarse por lo cual puedes introducir HTML dentro de ellos, como por ejemplo, una imagen. A su vez, pueden aplicarse estilos CSS de una manera mas óptima y crear botones mas interactivos y fluidos para el usuario.

En conclusión, que la etiqueta button te ofrece una lista mas amplia de posibilidades que su alter-ego input.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.