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


1636

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?

Respuestas:


663

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.


186
Esta respuesta fue en 2009, ya que IE6 está muerto ahora. ¿Asumo que no hay razón para no usarlo <button>ahora?
Rosdi Kasim

75
Si quieren piratear, déjelos obtener una versión desagradable de su sitio. Soltar IE6, soltar IE7, desafortunadamente IE8 todavía necesita soporte.
Jared

15
De acuerdo con la página de cuenta regresiva IE6 de Microsoft , el uso de IE6 de China todavía se registra (a partir de enero de 2014) en aproximadamente el 22%. ie6death.com señala que el soporte para IE6 finalizará el 8 de abril de 2014.
BryanH

54
Como muchos han bromeado, los usuarios que todavía usan versiones antiguas de IE probablemente estén acostumbrados a que Internet se vea horriblemente roto.
jinglesthula

99
<button />también tiene un formatributo (y atributos relacionados) para que pueda vincularse a formularios en otras partes del cuerpo del documento.
Gup3rSuR4c

327

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"

44
¿Puedes agregar más detalles? ¿Qué pasa si hay varios botones? ¿Es solo type = 'submit' que hace esto?
Simon_Weaver

44
Oh querido W3C, ¿ submitpor qué por defecto cuando el 99.9% de los formularios tiene mucho buttoncon uno submit ?
2grit

13
Muchos formularios también tienen un solo botón, que es el envío. Tuve que hacer una llamada de una forma u otra, supongo.
jinglesthula

55
¡Esto puede ser GRANDE! Mi código de prueba se envía aproximadamente el 80% del tiempo; de lo contrario, se trató como un botón normal. CUIDADO cuando se usa <botón> en un <formulario>
Sydwell

44
@ mik01aj "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". ¿No es esto obvio? Cualquier botón de envío debe enviar el formulario. ¿Por qué decir esto? ¿Qué me estoy perdiendo?
Concrete Gannet

174

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


44

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.


44
+1, ya <input />que de hecho es un elemento vacío, mientras <button>que no lo es
Sebastian

39

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


43
@Hawken Esa página fue escrita por idiotas que pensaron que W3Schools pretendía ser W3C. En realidad, W3Schools no es mejor ni peor que miles de otros sitios que manejan este tipo de material.
Sr. Lister el

en realidad, depende de la versión de IE y el modo IE - w3schools actualizó la información desde la cita
Damien

12
@MrLister He hablado con personas que piensan que W3Schools está asociado con el W3C. Si bien no estoy seguro de estar de acuerdo con la "responsabilidad de W3Fools de proporcionar información precisa", creo que la precisión de W3Schools deja algo que desear, y que sus críticos no son necesariamente idiotas. (Aprendí mucho de W3S, cuando era bueno; no ha seguido el ritmo de los estándares.)
Marnen Laibow-Koser

17
@MrLister W3Schools es fácilmente la fuente no oficial más utilizada para la información de tecnología web. Y la calidad realmente apesta. ¿Por qué no destacarlos? ¿Y qué detalles se equivocaron W3Fools? Todo allí me parece correcto.
Marnen Laibow-Koser

19

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 .


17

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.


17

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.


99
Para secuencias de comandos del lado del cliente. <input type = "button"> no tiene función en HTML.
iGEL

12
<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


9

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.


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


re: KjetilNordin - Teníamos una aplicación que estaba al tanto de cualquier evento de enfoque en una página, y una ocurrió, una acción tuvo lugar. Entonces, si usa una entrada, puede ver todos los elementos para un solo evento. No digo que debas, pero podrías. El riesgo es que alguien cambie la entrada a un botón, y luego no ocurra el enfoque, y luego su acción no ocurra, y luego su aplicación se dispare. Eso es lo que nos pasó a nosotros. :)
MattC

1
use eventos de enfoque cuando un elemento está actualmente dirigido a través del mouse / teclado. le muestran al usuario dónde se encuentran en el documento.
albert

7

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


7

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.


4

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.


4

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/

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.