Pregunta


Al mirar 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 hay alguno?
  • ¿Hay razones válidas para usar una en lugar de la otra?
  • ¿Hay razones válidas para usar combinarlas?
  • ¿El uso <button> vienen con problemas de compatibilidad, ya que no es muy utilizado?

1431
2018-01-22 13:14


origen


Respuestas:


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

Otro problema de IE al usar <button />:

Y mientras hablamos de IE, es   tengo un par de errores relacionados con el   ancho de botones Misteriosamente   agregue relleno extra cuando lo intente   para agregar estilos, lo que significa que debes agregar   un pequeño truco para poner las cosas bajo   controlar.


588
2018-01-22 13:20



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

Editar - más detalles

Sin un tipo, button implícitamente recibe tipo de submit. No importa cuántos botones de envío o entradas haya en el formulario, cualquiera de ellos escrito 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"

270
2018-04-09 20:13



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

De 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 está configurado en   "Imagen", pero el tipo de elemento BUTTON   permite contenido

El elemento del botón - W3C


159
2018-01-22 13:19



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


38
2018-03-28 04:27



Citar

Importante: si utiliza el elemento del botón en un formulario HTML, diferentes navegadores enviarán diferentes valores. Internet Explorer enviará el texto entre <button> y </button> etiquetas, 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 la compatibilidad y la coherencia de entrada desde el navegador al navegador


36
2018-01-22 13:18



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.


16
2018-03-01 08:17



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

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

Un entrada (<input>) representa un campo de datos: por lo tanto, algunos datos de usuario que desea 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 usa para subir un archivo"Reiniciar"borra una forma, y"enviar"envía los datos al servidor. Verifique la referencia W3 en MDN o en W3Schools.

los 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 ::before y ::after pseudo-elementos;
  • los botones apoyan el disabled atributo. Esto hace que sea fácil girar ellos por intervalos

De nuevo, verifique la referencia de W3 para <button> etiqueta en MDN o en W3Schools.


16
2017-11-08 14:31



Citando el Página de formularios en el manual de HTML:

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


15
2018-01-22 13:19



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

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


8
2017-12-21 17:12



En lo que se refiere al estilo CSS, <button type="submit" class="Btn">Example</button> es mejor, ya que te da la posibilidad de usar CSS :before y :after  pseudoclases que puede ayudar.

Debido a la <input type="button"> visualmente representando diferente a un <a> o <span> cuando estilo con clases en ciertas situaciones, los evito.

Vale la pena observar el respuesta actual superior fue escrito en 2009. IE6 no es una preocupación ahora días tan <button type="submit">Wins</button> la consistencia del estilo en mis ojos sale a la luz.


7
2017-07-30 04:33