Differenza tra <input type = 'submit' /> e <button type = 'submit'> text </button>

149

Ci sono molte leggende su di loro. Voglio sapere la verità Quali sono le differenze tra i due esempi seguenti?

<input type='submit' value='text' />
<button type='submit'>text</button>

html button

— Giacomo
fonte

Intendi <input type="submit">e <button type="submit">?

— kennytm,

Possibile duplicato della differenza tra <input type = 'button' /> e <input type = 'submit' />

— Hakan Fıstık

inputè un elemento vuoto. Non usare <input />, basta usare <input>.

— CDT,

@ HakanFıstık, non un duplice, è stato lì, è un (più o meno sottilmente) diverso, ad esempio type=submitperché buttonnon c'era nemmeno un problema lì (probabilmente perché non era nemmeno parte della norma all'epoca (AFAIK), quando è stata posta quell'altra domanda).

— Sz.

Risposte:

121

Non sono sicuro da dove prendi le tue leggende ma:

Pulsante Invia con `<button>`

Come con:

<button type="submit">(html content)</button>

IE6 invierà tutto il testo per questo pulsante tra i tag, gli altri browser invieranno solo il valore. L'utilizzo <button>offre maggiore libertà di layout rispetto al design del pulsante. In tutti i suoi scopi e scopi, all'inizio sembrava eccellente, ma a volte varie stranezze del browser lo rendono difficile da usare.

Nel tuo esempio, IE6 invierà textal server, mentre la maggior parte degli altri browser non invierà nulla. Per renderlo compatibile con più browser, utilizzare <button type="submit" value="text">text</button>. Meglio ancora: non usare il valore, perché se aggiungi HTML diventa piuttosto complicato ciò che viene ricevuto sul lato server. Invece, se è necessario inviare un valore aggiuntivo, utilizzare un campo nascosto.

Pulsante con `<input>`

Come con:

<input type="button" />

Per impostazione predefinita, questo non fa quasi nulla. Non invierà nemmeno il modulo. Puoi solo posizionare il testo sul pulsante e dargli una dimensione e un bordo per mezzo di CSS. Il suo intento originale (e attuale) era quello di eseguire uno script senza la necessità di inviare il modulo al server.

Pulsante di invio normale con `<input>`

Come con:

<input type="submit" />

Come il primo, ma in realtà presenta la forma circostante.

Pulsante di invio immagine con `<input>`

Come con:

<input type="image" />

Come il primo (invia), invierà anche un modulo, ma puoi usare qualsiasi immagine. Questo era il modo preferito di utilizzare le immagini come pulsanti quando era necessario inviare un modulo. Per un maggiore controllo, <button>ora viene utilizzato. Questo può essere utilizzato anche per le mappe immagine lato server ma è una rarità in questi giorni. Quando si utilizza usemap-attribute e (con o senza quell'attributo), il browser invierà le coordinate X / Y del puntatore del mouse al server (più precisamente, la posizione del puntatore del mouse all'interno del pulsante nel momento in cui lo si fa clic). Se semplicemente ignori questi extra, non è altro che un pulsante di invio mascherato da immagine.

Esistono alcune sottili differenze tra i browser, ma tutti invieranno l'attributo value, ad eccezione del <button>tag come spiegato sopra.

— Abel
fonte

Dato che hai modificato comunque, il punto su IE6 è ancora vero con IE11 in modalità stranezze. (Ancora un altro motivo per non usare la modalità stranezze). Risolto in Edge però. Oh, e ci sono più differenze tra <input> e <button>: <input> ha white-space:predi default, <button> no. Ciò diventa evidente quando si tenta di allargare un pulsante rispetto al riquadro di visualizzazione.

— Lister,

Con <button>, puoi usare i tag img, ecc. Dove si trova il testo

<button type='submit'> text -- can be img etc.  </button>

con il <input>tipo, sei limitato al testo

— Sparky
fonte

con <input type="image" />te non sono limitati al testo ed esegue anche un invio.

— Abele,

@Abel: questo è più per creare una mappa immagine che a sua volta invia la posizione del puntatore del mouse come name.xe name.yparametri (nota che il nameparametro non è presente!). Preferirei utilizzare <input type="submit">con uno sfondo CSS se l'unico scopo è quello di avere un pulsante con un'immagine di sfondo.

— BalusC

@BalusC: Vero, ma il suo scopo, al momento della stesura dello standard HTML 2.0, quando non esisteva CSS, era, come descritto, utilizzare un'immagine come pulsante o come mappa immagine lato server. Ma in effetti, puoi (ab) utilizzare un pulsante normale con un'immagine di sfondo per fare lo stesso con CSS e HTML.

— Abele,

@Abel: Non è mai stato questo l'intento input type="image". Per questo <button type="submit">è intenzionale.

— BalusC

@BalusC: forse capiamo lo standard in modo diverso, ma questo è nel testo originale di Lee per lo standard HTML 2.0: " TYPE=IMAGE' implies Elaborazione TYPE = SUBMIT '; cioè, quando viene scelto un pixel, viene inviato il modulo nel suo insieme". . Fai di ciò che pensi sia il vero intento :)

— Abele,

In sintesi :

<input type="submit">

<button type="submit"> Submit </button>

Entrambi per impostazione predefinita disegneranno visivamente un pulsante che esegue la stessa azione (invia il modulo).

Tuttavia, si consiglia di utilizzare <button type="submit">perché ha una semantica migliore, un migliore supporto ARIA ed è più facile da modellare.

— Juanma Menendez
fonte

Differenza tra <input type = 'submit' /> e <button type = 'submit'> text </button>

Pulsante Invia con <button>

Pulsante con <input>

Pulsante di invio normale con <input>

Pulsante di invio immagine con <input>

Pulsante Invia con `<button>`

Pulsante con `<input>`

Pulsante di invio normale con `<input>`

Pulsante di invio immagine con `<input>`