& Lt; button > vs. < input type = & # 8220; pulsante & # 8221; / & Gt ;. Quale usare?

Question

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 ce ne sono?
• Esistono validi motivi per utilizzare l'uno anziché l'altro?
• Ci sono validi motivi per usarli insieme?
• L'uso del < button > comporta problemi di compatibilità, visto che non è molto usato?

Answer 1

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

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

  

E mentre stiamo parlando di IE, lo è   ha un paio di bug relativi al   larghezza dei pulsanti. Sarà misteriosamente   aggiungi ulteriore imbottitura quando ci provi   per aggiungere stili, nel senso che devi aggiungere   un piccolo trucco per mettere le cose sotto   controllo.

Answer 2

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

Modifica - maggiori dettagli

Senza un tipo, button riceve implicitamente il tipo di Invia . 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"

Answer 3

Questo articolo sembra offrire una panoramica abbastanza buona della differenza.

Dalla pagina:

  

I pulsanti creati con l'elemento BUTTON funzionano esattamente come i pulsanti   creato con l'elemento INPUT, ma   offrono un rendering più ricco   possibilità: l'elemento BUTTON può   avere contenuti. Ad esempio, un PULSANTE   elemento che contiene un'immagine   funzioni come e possono assomigliare a un   Elemento INPUT il cui tipo è impostato su   & # 8220; immagine & # 8221 ;, ma il tipo di elemento PULSANTE   consente il contenuto.

     

The Button Element - W3C

Answer 4

All'interno di un elemento < button > 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'elemento < input > .

Answer 5

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 capisco correttamente, la risposta è compatibilità e coerenza di input da browser a browser

Answer 6

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 "image", ma il tipo di elemento BUTTON consente il contenuto.

Answer 7

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.

Answer 8

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

Ancore (l'elemento < a > ) 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 " > .
Ciascuno di essi ha un significato, ad esempio " file " viene utilizzato per caricare un file, " ripristina " cancella un modulo e " invia " invia i dati al server. Controlla il riferimento W3 su MDN o su W3Schools .

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

• puoi annidare elementi all'interno di un pulsante, come immagini, paragrafi o intestazioni;
I pulsanti
• possono contenere anche pseudo-elementi :: before e :: after ;
I pulsanti
• supportano l'attributo disabled . Questo rende facile girare accendendoli e spegnendoli.

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

Answer 9

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

Answer 10

<button>

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

vs.

<input type='button'>

• type deve essere impostato su 'submit' per comportarsi come elemento di invio
• può essere utilizzato solo nei moduli.
• sono consentiti 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 modellabili con css ma nella maggior parte dei casi, l'elemento button è preferito poiché puoi modellare di più con html interno e pseudo elementi

Answer 11

Per quanto riguarda lo stile CSS, il < button type = " submit " class = " Btn " > Esempio < / button > è migliore in quanto ti dà la possibilità di usare CSS : before e : after pseudo classi che possono aiutare.

A causa del < input type = " button " > che rende visivamente diverso da un < a > o < span > quando sono disegnato con classi in determinate situazioni, le evito.

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

Answer 12

< 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 < button type = " submit " > difficile e doloroso.

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

Answer 13

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.

Answer 14

inoltre, una delle differenze può venire dal provider 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 come input , sarà principalmente quello fisso, solo perché è più popolare.