<botón> vs. <input type = "button" />. ¿Cuál usar?

Al mirar en la mayoría de los sitios (incluido SO), la mayoría de ellos usan:

<input type="button" />

en vez de:

<button></button>

• ¿Cuáles son las principales diferencias entre los dos, si los hay?
• ¿Hay razones válidas para usar una en lugar de la otra?
• ¿Hay razones válidas para usar combinarlos?
• ¿El uso <button>viene con problemas de compatibilidad, ya que no se usa mucho?

• Aquí hay una página que describe las diferencias (básicamente puedes poner html en a <button></button>)
• Y otra página que describe por qué las personas evitan <button></button>(Sugerencia: IE6)

Otro problema de IE cuando se usa <button />:

Y mientras hablamos de IE, tiene un par de errores relacionados con el ancho de los botones. Misteriosamente agregará relleno adicional cuando intente agregar estilos, lo que significa que debe agregar un pequeño truco para tener las cosas bajo control.

Solo como una nota al margen, se <button>enviará implícitamente, lo que puede causar problemas si desea utilizar un botón en un formulario sin que se envíe. Por lo tanto, otra razón para usar <input type="button">(o <button type="button">)

Editar - más detalles

Sin un tipo, buttonrecibe implícitamente el tipo desubmit . No importa cuántos botones de envío o entradas haya en el formulario, cualquiera de ellos que se escriba explícita o implícitamente como enviar, al hacer clic, enviará el formulario.

Hay 3 tipos compatibles para un botón

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"

Este artículo parece ofrecer una buena visión general de la diferencia.

De la página:

Los botones creados con el elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen más posibilidades de representación: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BOTÓN que contiene una imagen funciona como y puede parecerse a un elemento ENTRADA cuyo tipo se establece en "imagen", pero el tipo de elemento BOTÓN permite contenido.

El elemento del botón - W3C

Dentro de un <button>elemento puedes poner contenido, como texto o imágenes.

<button type="button">Click Me!</button> 

Esta es la diferencia entre este elemento y los botones creados con el <input>elemento.

Citar

Importante: Si usa el elemento del botón en un formulario HTML, los diferentes navegadores enviarán valores diferentes. Internet Explorer enviará el texto entre las etiquetas <button>y </button>, mientras que otros navegadores enviarán el contenido del atributo de valor. Use el elemento de entrada para crear botones en un formulario HTML.

De: http://www.w3schools.com/tags/tag_button.asp

Si entiendo correctamente, la respuesta es compatibilidad y consistencia de entrada de un navegador a otro

Citaré el artículo La diferencia entre anclas, entradas y botones :

Las anclas (el <a>elemento) representan hipervínculos, recursos que una persona puede navegar o descargar en un navegador. Si desea permitir que su usuario se mueva a una nueva página o descargue un archivo, use un ancla.

Una entrada ( <input>) representa un campo de datos: algunos datos de usuario que quiere enviar al servidor. Hay varios tipos de entrada relacionados con los botones:

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

Cada uno de ellos tiene un significado, por ejemplo, " archivo " se utiliza para cargar un archivo, " restablecer " borra un formulario y " enviar " envía los datos al servidor. Verifique la referencia W3 en MDN o en W3Schools .

El botón ( <button>)elemento es bastante versátil:

• puede anidar elementos dentro de un botón, como imágenes, párrafos o encabezados;
• los botones también pueden contener ::beforey ::afterpseudo-elementos;
• Los botones admiten el disabledatributo. Esto facilita encenderlos y apagarlos.

Nuevamente, verifique la referencia W3 para la <button>etiqueta en MDN o en W3Schools .

Citando la página de formularios en el manual HTML:

Los botones creados con el elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen mayores posibilidades de representación: el elemento BUTTON puede tener contenido. Por ejemplo, un elemento BUTTON que contiene una imagen funciona como y puede parecerse a un elemento INPUT cuyo tipo se establece en "image", pero el tipo de elemento BUTTON permite contenido.

Use el botón del elemento de entrada si desea crear un botón en un formulario. Y use la etiqueta de botón si desea crear un botón para una acción.

<button>

• por defecto se comporta como si tuviera un atributo "type =" submit "
• se puede usar sin formulario, así como en formularios.
• texto o contenido html permitido
• pseudo elementos css permitidos (como: antes)
• el nombre de la etiqueta suele ser exclusivo de un formulario único

vs.

<input type='button'>

• type debe establecerse en 'submit' para comportarse como un elemento de envío
• solo se puede usar en formularios.
• solo contenido de texto permitido
• sin pseudo elementos css
• mismo nombre de etiqueta que la mayoría de los elementos de formularios (entradas)

-
en los navegadores modernos, ambos elementos se pueden diseñar fácilmente con css, pero en la mayoría de los casos, buttonse prefiere el elemento , ya que puede diseñar más con html interno y pseudo elementos

En lo que respecta al estilo CSS, es <button type="submit" class="Btn">Example</button>mejor, ya que le brinda la capacidad de usar CSS :beforey :after pseudo clases que pueden ayudar.

Debido a la <input type="button">representación visual diferente a una <a>o <span>cuando se diseñó con clases en ciertas situaciones, las evito.

Vale la pena señalar que la respuesta principal actual se escribió en 2009. IE6 no es una preocupación hoy en día, por lo que la <button type="submit">Wins</button>consistencia del estilo en mis ojos se destaca.

Hay una gran diferencia si está utilizando jQuery. jQuery está al tanto de más eventos en las entradas que en los botones. En los botones, jQuery solo está al tanto de los eventos de 'clic'. En las entradas, jQuery es consciente de los eventos 'clic', 'enfoque' y 'desenfoque'.

Siempre puede vincular eventos a sus botones según sea necesario, pero tenga en cuenta que los eventos que jQuery reconoce automáticamente son diferentes. Por ejemplo, si creó una función que se ejecutó cada vez que hubo un evento de 'enfoque' en su página, una entrada activaría la función pero un botón no.

<button>es flexible porque puede contener HTML. Además, es mucho más fácil diseñar con CSS, y el estilo se aplica en todos los navegadores. Sin embargo, hay algunos inconvenientes con respecto a Internet Explorer (¡Eww! IE!). Internet Explorer no detecta el atributo de valor correctamente, utilizando el contenido de la etiqueta como valor. Todos los valores de un formulario se envían al lado del servidor, independientemente de si se hace clic en el botón o no. Esto hace que usarlo sea <button type="submit">complicado y doloroso.

<input type="submit">por otro lado, no tiene ningún problema de valor o detección, pero no puede, sin embargo, agregar HTML como puede hacerlo <button>. También es más difícil de diseñar, y el estilo no siempre responde bien en todos los navegadores. Espero que esto haya ayudado.

Solo quiero agregar algo al resto de las respuestas aquí. Los elementos de entrada se consideran elementos vacíos o vacíos (otros elementos vacíos son área, base, br, col, hr, img, input, link, meta y param. También puede verificar aquí ), lo que significa que no pueden tener ningún contenido. Además de no tener ningún contenido, los elementos vacíos no pueden tener pseudoelementos como :: after y :: before , lo que considero un gran inconveniente.

Además, una de las diferencias puede provenir del proveedor de la biblioteca y de lo que codifican. por ejemplo, aquí estoy usando la plataforma cordova en combinación con la interfaz de usuario angular móvil, y aunque las etiquetas input / div / etc funcionan bien con ng-click, el botón puede hacer que el depurador de Visual Studio se bloquee, seguramente por las diferencias, que causó el programador; tenga en cuenta que MattC responde al mismo problema, jQuery es solo una lib, y el proveedor no pensó en alguna funcionalidad en un elemento que proporciona en otro. así que cuando esté usando una biblioteca, puede enfrentar un problema con un elemento, que no enfrentará con otro. y simplemente el popular como input, en su mayoría será el fijo, solo porque es más popular.

Aunque esta es una pregunta muy antigua y puede que ya no sea relevante, tenga en cuenta que la mayoría de los problemas que <button> tenía etiqueta ya no existen y, por lo tanto, es muy recomendable usarla.

En caso de que no pueda hacerlo por varias razones, solo tenga en cuenta agregar el atributo role = "button" en su etiqueta a partir de la accesibilidad. Este artículo es bastante informativo: https://www.deque.com/blog/accessible-aria-buttons/