<button> vs. <input type = “button” />. Quale usare?

Quando guardano la maggior parte dei siti (incluso SO), la maggior parte di essi usa:

<input type="button" />

invece di:

<button></button>

• Quali sono le principali differenze tra i due, se presenti?
• Ci sono validi motivi per utilizzare l'uno anziché l'altro?
• Ci sono validi motivi per usarli insieme?
• L'utilizzo <button>comporta problemi di compatibilità, visto che non è molto utilizzato?

• Ecco una pagina che descrive le differenze (in pratica puoi inserire html in a <button></button>)
• E un'altra pagina che descrive perché le persone evitano <button></button>(Suggerimento: IE6)

Un altro problema di IE quando si utilizza <button />:

E mentre stiamo parlando di IE, ha un paio di bug relativi alla larghezza dei pulsanti. Aggiungerà misteriosamente un'imbottitura extra quando stai cercando di aggiungere stili, il che significa che devi aggiungere un piccolo hack per tenere le cose sotto controllo.

Proprio come una nota a margine, <button>verrà implicitamente inviato, il che può causare problemi se si desidera utilizzare un pulsante in un modulo senza l'invio. Pertanto, un altro motivo per utilizzare <input type="button">(o <button type="button">)

Modifica : maggiori dettagli

Senza un tipo, buttonriceve implicitamente il tipo disubmit . Non importa quanti pulsanti di invio o input ci sono nel modulo, ognuno di essi che viene digitato in modo esplicito o implicito come invia, quando viene cliccato, invierà il modulo.

Esistono 3 tipi supportati per un pulsante

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"

Questo articolo sembra offrire una panoramica abbastanza buona della differenza.

Dalla pagina:

I pulsanti creati con l'elemento BUTTON funzionano esattamente come i pulsanti creati con l'elemento INPUT, ma offrono possibilità di rendering più complete: l'elemento BUTTON può avere contenuto. Ad esempio, un elemento PULSANTE che contiene un'immagine funziona come e può assomigliare a un elemento INPUT il cui tipo è impostato su "immagine", ma il tipo di elemento PULSANTE consente il contenuto.

L'elemento Button - W3C

All'interno di un <button>elemento puoi inserire contenuti, come testo o immagini.

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

Questa è la differenza tra questo elemento e i pulsanti creati con l' <input>elemento.

Citazione

Importante: se si utilizza l'elemento del pulsante in un modulo HTML, browser diversi invieranno valori diversi. Internet Explorer invierà il testo tra i tag <button>e </button>, mentre altri browser invieranno il contenuto dell'attributo value. Utilizzare l'elemento di input per creare pulsanti in un modulo HTML.

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

Se ho capito bene, la risposta è compatibilità e coerenza di input da browser a browser

Citerò l'articolo La differenza tra ancore, input e pulsanti :

Le ancore (l' <a>elemento) rappresentano collegamenti ipertestuali, risorse a cui una persona può navigare o scaricare in un browser. Se si desidera consentire all'utente di spostarsi in una nuova pagina o scaricare un file, utilizzare un ancoraggio.

Un input ( <input>) rappresenta un campo dati: quindi alcuni dati utente che intendi inviare al server. Esistono diversi tipi di input relativi ai pulsanti:

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

Ognuno di essi ha un significato, ad esempio " file " viene utilizzato per caricare un file, " reset " cancella un modulo e " submit " invia i dati al server. Controlla il riferimento W3 su MDN o su W3Schools .

Il pulsante (l' <button>)elemento è abbastanza versatile:

• puoi annidare elementi all'interno di un pulsante, come immagini, paragrafi o intestazioni;
• i pulsanti possono anche contenere ::beforee ::afterpseudo-elementi;
• i pulsanti supportano l' disabledattributo. Questo rende facile accenderli e spegnerli.

Ancora una volta, controlla il riferimento W3 per il <button>tag su MDN o su W3Schools .

Citando la pagina dei moduli nel manuale HTML:

I pulsanti creati con l'elemento BUTTON funzionano esattamente come i pulsanti creati con l'elemento INPUT, ma offrono possibilità di rendering più complete: l'elemento BUTTON può avere contenuto. Ad esempio, un elemento BUTTON che contiene un'immagine funziona come e può assomigliare a un elemento INPUT il cui tipo è impostato su "immagine", ma il tipo di elemento BUTTON consente il contenuto.

Utilizzare il pulsante dall'elemento di input se si desidera creare il pulsante in un modulo. E usa il tag pulsante se vuoi creare un pulsante per un'azione.

<button>

• per impostazione predefinita si comporta come se avesse un attributo "type =" submit "
• può essere utilizzato senza un modulo, nonché nei moduli.
• contenuti di testo o html consentiti
• pssudo elementi CSS ammessi (come: prima)
• il nome del tag è in genere univoco per un singolo modulo

vs.

<input type='button'>

• type dovrebbe essere impostato su 'submit' per comportarsi come un elemento di invio
• può essere utilizzato solo nei moduli.
• sono ammessi solo contenuti testuali
• nessun pseudo elemento css
• stesso nome tag della maggior parte degli elementi dei moduli (input)

-
nei browser moderni, entrambi gli elementi sono facilmente personalizzabili con CSS ma nella maggior parte dei casi, l' buttonelemento è preferito in quanto puoi modellare di più con html interno e pseudo elementi

Per quanto riguarda lo stile CSS, <button type="submit" class="Btn">Example</button>è meglio in quanto ti dà la possibilità di utilizzare CSS :beforee :after pseudo classi che possono aiutare.

A causa della <input type="button">resa visiva diversa da <a>o in <span>stile con classi in determinate situazioni, le evito.

Vale la pena notare che l' attuale risposta principale è stata scritta nel 2009. IE6 non è un problema al giorno d'oggi, quindi la <button type="submit">Wins</button>coerenza stilistica nei miei occhi viene fuori in cima.

C'è una grande differenza se stai usando jQuery. jQuery è a conoscenza di più eventi sugli input rispetto ai pulsanti. Sui pulsanti, jQuery è a conoscenza solo degli eventi "click". Sugli input, jQuery è a conoscenza degli eventi 'click', 'focus' e 'blur'.

Puoi sempre associare gli eventi ai tuoi pulsanti secondo necessità, ma tieni presente che gli eventi di cui jQuery è automaticamente a conoscenza sono diversi. Ad esempio, se hai creato una funzione che è stata eseguita ogni volta che c'era un evento 'focusin' sulla tua pagina, un input avrebbe attivato la funzione ma un pulsante no.

<button>è flessibile in quanto può contenere HTML. Inoltre, è molto più semplice definire lo stile utilizzando i CSS e lo stile viene effettivamente applicato a tutti i browser. Tuttavia, ci sono alcuni svantaggi riguardo a Internet Explorer (Eww! IE!). Internet Explorer non rileva correttamente l'attributo value, utilizzando il contenuto del tag come valore. Tutti i valori in un modulo vengono inviati al lato server, indipendentemente dal fatto che si faccia clic o meno sul pulsante. Questo rende l'utilizzo come un <button type="submit">trucco e un dolore.

<input type="submit">d'altra parte non ha alcun valore o problemi di rilevamento, ma non è possibile, tuttavia, aggiungere HTML come si può con <button>. È anche più difficile da applicare allo stile e lo stile non sempre risponde bene su tutti i browser. Spero che questo abbia aiutato.

Voglio solo aggiungere qualcosa al resto delle risposte qui. Gli elementi di input sono considerati elementi vuoti o vuoti (altri elementi vuoti sono area, base, br, col, hr, img, input, link, meta e param. Puoi anche controllare qui ), il che significa che non possono avere alcun contenuto. Oltre a non avere alcun contenuto, gli elementi vuoti non possono avere pseudo-elementi come :: after e :: before , che considero un grave svantaggio.

inoltre, una delle differenze può provenire dal fornitore della libreria e da cosa codificano. ad esempio qui sto usando la piattaforma Cordova in combinazione con l'interfaccia utente angolare mobile e mentre i tag input / div / etc funzionano bene con ng-click, il pulsante può causare l'arresto anomalo del debugger di Visual Studio, sicuramente a causa delle differenze, causato dal programmatore; nota che MattC risponde allo stesso problema, jQuery è solo una lib e il provider non ha pensato ad alcune funzionalità su un elemento, che fornisce su un altro. quindi quando si utilizza una libreria, è possibile che si verifichi un problema con un elemento, che non si dovrà affrontare con un altro. e semplicemente quello popolare input, sarà principalmente quello fisso, solo perché è più popolare.

Anche se questa è una domanda molto vecchia e potrebbe non essere più pertinente, tieni presente che la maggior parte dei problemi che il <button>tag aveva non esiste più e quindi è altamente consigliabile usarla.

Nel caso in cui non sia possibile farlo per vari motivi, tieni presente solo di aggiungere l'attributo ruolo = "pulsante" nel tag al momento dell'accessibilità. Questo articolo è piuttosto informativo: https://www.deque.com/blog/accessible-aria-buttons/