< botón > vs. < input type = & # 8220; botón & # 8221; / > ;. ¿Cuál usar?

Question

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

<input type="button" />

en lugar 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 usarlos?
• ¿El uso de < button > presenta problemas de compatibilidad, ya que no se usa mucho?

Answer 1

• Aquí hay una página describiendo 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 cuando se usa < button / > :

  

Y mientras hablamos de IE, es   tengo un par de errores relacionados con el   ancho de botones. Misteriosamente   agregue relleno adicional cuando lo intente   para agregar estilos, lo que significa que tienes que agregar   un pequeño truco para meter las cosas debajo   control.

Answer 2

Como nota al margen, < button > se 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, button recibe implícitamente el tipo de enviar . 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, 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"

Answer 3

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

Desde la página:

  

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

     

El elemento del botón - W3C

Answer 4

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 5

Cita

  

Importante: Si utiliza 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

Answer 6

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.

Answer 7

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

Answer 8

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

Anclas (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. Existen 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 usa 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 button ( < 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 pseudoelementos :: before y :: after ;
Los botones
• admiten el atributo desactivado . Esto hace que sea fácil girar encendido y apagado.

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

Answer 9

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ó siempre que hubo un evento de 'enfoque' en su página, una entrada activaría la función pero un botón no.

Answer 10

<button>

• por defecto se comporta como si tuviera un " type = " submit " atributo
• puede usarse sin un 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 solo formulario

vs.

<input type='button'>

El tipo
• 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, se prefiere el elemento button ya que puede diseñar más con html interno y pseudoelementos

Answer 11

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

Debido al < input type = " button " > visualmente diferente a un < a > o < span > cuando estoy diseñado con clases en ciertas situaciones, las evito.

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

Answer 12

< button > es flexible ya que 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 como < button type = " submit " > sea 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 con < code> < 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 13

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.

Answer 14

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 , será principalmente el fijo, solo porque es más popular.