html - etiqueta - <button> vs.<input type=“button”/>. ¿Cuál usar?

input type button html

Question

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

<input type="button" />

en lugar de:

<button></button>

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

Answer 1

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 mientras 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 diferencias, que causó el programador; tenga en cuenta que la respuesta de MattC apunta al mismo problema, jQuery es solo una libreta, y el proveedor no pensó en alguna funcionalidad en un elemento, que él / ella proporciona en otro. por lo tanto, cuando utiliza 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.

Answer 2

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 reproducció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 está configurado en "imagen", pero el tipo BUTTON del elemento permite el contenido.

Answer 3

Citar

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

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

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

Answer 4

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

Los anclajes (el elemento <a> ) 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: por lo tanto, 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 elemento botón ( <button>) 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 ::before y ::after pseudo-elements;
• los botones soportan el atributo disabled . Esto hace que sea fácil encenderlos y apagarlos.

De nuevo, verifique la referencia W3 para la etiqueta <button> en MDN o http://www.w3schools.com/tags/tag_button.asp .

Answer 5

Dentro de un elemento <button> puede 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 elemento <input> .

Answer 6

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

Debido a que <input type="button"> renderiza visualmente de manera diferente a <a> o <span> cuando se las estiliza 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 en estos días, por lo que <button type="submit">Wins</button> consistencia en el estilo de mis ojos aparece en la parte superior.

Answer 7

Hay una gran diferencia si estás usando jQuery. jQuery es consciente de más eventos en las entradas que de los botones. En los botones, jQuery solo es consciente de los eventos de ''clic''. En las entradas, jQuery es consciente de los eventos de ''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ó siempre que hubo un evento de ''enfoque'' en su página, una entrada activaría la función pero un botón no.

Answer 8

La respuesta corta es que el botón se comporta de manera diferente en IE6 / 7 en comparación con otros navegadores, mientras que el botón de entrada se comporta de la misma manera en todos los navegadores.

Answer 9

Solo como una nota al margen, <button> enviará implícitamente, lo que puede causar problemas si desea usar 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, el button recibe implícitamente el tipo de submit . No importa cuántos botones o entradas de envío haya en el formulario, cualquiera de ellos que se escriba explícita o implícitamente como enviar, cuando se haga clic en él, enviará el formulario.

Hay 3 tipos soportados 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"

Answer 10

Solo quiero añadir algo al resto de las respuestas aquí. Los elementos de entrada se consideran elementos vacíos o vacíos (otros elementos vacíos son area, base, br, col, hr, img, input, link, meta y param. También puede marcar here ), 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 ningún pseudo-elementos como :: after y :: before , lo que considero un gran inconveniente.

Answer 11

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

Answer 12

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

Desde la página:

Los botones creados con el elemento BUTTON funcionan igual que los botones creados con el elemento INPUT, pero ofrecen mayores posibilidades de reproducció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 "imagen", pero el tipo de elemento BUTTON permite el contenido.

El elemento de botón - W3C

Answer 13

<button> es flexible ya que puede contener HTML. Además, es mucho más fácil aplicar estilos a 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 correctamente el atributo de valor, 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 o no en el botón. Esto hace que usarlo como <button type="submit"> complicado y molesto.

<input type="submit"> no tiene ningún valor ni problemas de detección, pero no puede, sin embargo, agregar HTML como puede con <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.

Answer 14

<button>

• por defecto se comporta como si tuviera un atributo "tipo =" enviar "
• Puede ser utilizado sin forma tanto como en formas.
• contenido de texto o html permitido
• pseudo elementos css permitidos (como: antes)
• El nombre de la etiqueta suele ser exclusivo de un solo formulario.

contra

<input type=''button''>

• el tipo se debe establecer en ''enviar'' para que se comporte como un elemento de envío
• Solo puede ser utilizado en formas.
• solo se permite contenido de texto
• no hay pseudo elementos css
• mismo nombre de etiqueta que la mayoría de los elementos de formularios (entradas)

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

Answer 15

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

Otro problema de IE al usar <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 tendrá que agregar un pequeño truco para tener las cosas bajo control.