Quali svantaggi ci sono per il tag ?

Ho iniziato a utilizzare un foglio di stile CSS diagnostico, ad esempio http://snipplr.com/view/6770/css-diagnostics–highlight-deprecated-html-with-css–more/

Una delle regole suggerite evidenzia i tag di input con il tipo submit, con la raccomandazione di utilizzare .

Così ho iniziato ad aggiungere tutti i tipi di questi pulsanti, decorati con al loro interno per farli risaltare. E tutto ha funzionato alla grande … in Firefox e Chrome.

Poi ho provato IE6 e ho ottenuto “un valore Request.Form potenzialmente pericoloso rilevato”, perché IE6 invia l’html all’interno del pulsante, che, nel mio caso, contiene tag html. Non voglio disabilitare il flag validateRequest, perché mi piace questo bit aggiunto di convalida dei dati.

Quindi ho scritto un po ‘di javascript per disabilitare quel pulsante prima che si verificasse l’invio. Ha funzionato alla grande in una pagina di test, con un solo pulsante, ma quando l’ho provato su una pagina reale, che aveva altri tag , è esploso di nuovo. Perché IE6 invia TUTTI i pulsanti ‘html. Quindi ora ho tutti i tipi di codice per disabilitare i pulsanti prima dell’invio.

Stessi problemi con IE7. IE8 per fortuna ha risolto questo problema.

Yikes. Consiglierei di non seguire questa strada SE stai usando ASP.NET.

Aggiornare:

Ho trovato una libreria là fuori che sembra promettente per risolvere questo problema.

Se utilizzi lo script ie8.js da questa libreria: http://code.google.com/p/ie7-js/

Potrebbe funzionare bene. IE8.js porta IE5-7 alla velocità con IE8 con il tag button. Rende il valore presentato il valore reale e viene inviato un solo pulsante.

Quando si utilizza specificare sempre il tipo, poiché i browser utilizzano automaticamente tipi diversi.

Funzionerà in modo coerente su tutto il browser:

In questo modo ottieni tutta la bontà di , senza aspetti negativi.

Tutto quello che devi sapere: W3Schools Tag

Il tag è supportato in tutti i principali browser.

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

Professionisti:

  • L’etichetta di visualizzazione non deve essere uguale al valore inviato. Ottimo per i18n e “Elimina questa riga”
  • Puoi includere markup come e

Contro:

  • Alcune versioni di MSIE di default type="button" invece di type="submit" quindi devi essere esplicito
  • Alcune versioni di MSIE tratteranno tutti i con esito positivo in modo che non sia ansible stabilire quale sia stato cliccato in una forma di pulsante multi-invio
  • Alcune versioni di MSIE invieranno il testo visualizzato invece del valore reale

Una cosa importante da tenere presente: in una forma che contiene un elemento , IE6 e IE7 non invieranno il modulo quando si fa clic sull’elemento . Altri browser, d’altra parte, invieranno il modulo.

Al contrario, nessun browser invierà il modulo quando si fa o . E naturalmente, tutti i browser invieranno il modulo quando o elementi sono cliccati.

Come dice la risposta di @ orip, per ottenere un comportamento di invio coerente tra i vari browser, utilizzare sempre o all’interno di un elemento

. Non lasciare mai l’attributo type .

È rotto o no:

Come al solito, la risposta è ” funziona bene in tutti i principali browser, ma ha i seguenti capricci in IE. ” Non penso che sarà un problema per te però.

Il tag è supportato da tutti i principali browser. L’unico problema di supporto risiede in ciò che Internet Explorer invierà premendo un pulsante.

I principali browser invieranno il contenuto dell’attributo value. L’expoter di Internet invierà il testo tra i e , inviando anche il valore di tutti gli altri nel modulo, invece solo quello che hai cliccato.

Per i tuoi scopi, semplicemente pulendo il vecchio HTML, questo non dovrebbe essere un problema.

fonti:

  1. http://www.peterbe.com/plog/button-tag-in-IE
  2. http://www.w3schools.com/tags/default.asp

Ho avuto qualche esperienza con le stranezze di ora, 6 anni dopo, quindi ecco i miei suggerimenti:

  • Se stai ancora supportando IE6 o IE7 , stai molto attento con il pulsante, il comportamento è molto buggato con quei browser, in alcuni casi sottomettendo innerHtml invece di value = ‘any’ e tutti i valori dei pulsanti invece di un solo comportamento vizioso come quella. Quindi prova a fondo o evita per l’amor del browser.

  • Altrimenti: se stai ancora supportando IE8 , non funziona bene, e probabilmente qualsiasi altra cosa in cui annidi un pulsante all’interno di un elemento cliccabile. Quindi fai attenzione.

  • Altrimenti: se stai usando un principalmente come elemento per fare clic per il tuo javascript, ed è al di fuori di un modulo, fallo e probabilmente starai bene!

  • Altrimenti: se utilizzi in un modulo, fai attenzione che il tipo predefinito di sia effettivamente in (più) casi, quindi sii esplicito con il tuo tipo e il tuo value , come: .

Nota che: l’uso di una class di simulazione di pulsante, come Bootstrap .btn ti consente di fare in modo che cose come

o o anche appaiano esattamente come vuoi tu, e nel caso di avere un comportamento di fallback più utile. Non è una ctriggers opzione.

TLDR; Ok, da usare se non ti piacciono i browser antichi, ma Bootstrap offre anche alternative visivamente simili più robuste che vale la pena di esaminare.

Ecco un sito che spiega le differenze: http://www.javascriptkit.com/howto/button.shtml

In sostanza, il tag di input consente solo il testo (anche se è ansible utilizzare un’immagine di sfondo) mentre il pulsante consente di aggiungere immagini, tabelle, div e qualsiasi altra cosa. Inoltre, non richiede che sia annidato all’interno di un tag form.

Potresti anche incorrere in questi problemi:

Un’altra cosa è legata allo styling usando la tecnica della porta scorrevole : è necessario inserire un altro tag, ad esempio per farlo funzionare.

per quanto mi riguarda, la differenza tra i tag submit e button è questa: ti dà la possibilità di avere un testo diverso visualizzato rispetto al valore dell’elemento

Supponiamo che tu abbia un elenco di prodotti, quindi accanto a ciascun prodotto desideri un pulsante per aggiungerlo al carrello del cliente:

 product1 :  product2 :  product3 :  

allora potresti farlo:

  

Ora il problema è che IE invierà il modulo con valore = “aggiungi al carrello” invece di value = “product2”

Il modo più semplice per risolvere questo problema è aggiungere onclick = “this.value = ‘product2′”

Così questo:

  

farà il trucco su tutti i principali browser – l’ho effettivamente usato su un modulo con più pulsanti e funziona con Chrome Firefox e IE

Sembra che il motivo principale per usare sia quello di consentire il markup CSS di quel pulsante e la possibilità di assegnare uno stile al pulsante con le immagini: (vedi qui: http://www.javascriptkit.com/howto/button.shtml )

Tuttavia, penso che l’approccio più adottato che ho visto in (X) HTML + CSS è quello di utilizzare un div e lo stile completamente con le immagini e: pseudo-classi hover (simulando button downpress … non può aggiungere più di uno link per risposta, quindi solo google “pulsante div” vedrai molti esempi di questo), e usando javascript per inviare moduli o chiamate AJAX … questo ha anche più senso se non si usano i moduli HTML, e fai tutte le comunicazioni con AJAX.