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

223

Non esiste una domanda stupida, quindi eccoci qui: qual è la differenza tra <input type='button' />e <input type='submit' />?

html input types

— bounav
fonte

2

L'elemento HTML <button> non invia un modulo da solo, amico ...

— Hexagon Theory,

6

In realtà, lo fa in alcuni browser. Avere un modulo, senza un pulsante di invio ma invece un <pulsante> applicherà ad esso la funzionalità di invio. Firefox ha questo comportamento.

— Jishi,

Quando si leggono le specifiche W3C, questo è in realtà un comportamento predefinito, poiché i pulsanti hanno un attributo type che per impostazione predefinita è "submit".

— Jishi,

2

Vedi anche input type = "submit" I tag del pulsante V sono intercambiabili?

— hippietrail,

37

Ho avuto la stessa domanda e questa non è sicuramente una domanda stupida, specialmente se sei stato uno sviluppatore di moduli web asp.net per tutta la vita in cui non usiamo HTML regolarmente proprio perché gli stupidi controlli asp.net sputano questa merda per noi ... ecco perché finiamo per essere stupidi quando ci spostiamo su MVC e dobbiamo tornare all'asilo per capire come codificare di nuovo semplici elementi del modulo. :)

— Positivo

235

<input type="button" />i pulsanti non invieranno un modulo: non fanno nulla per impostazione predefinita. Sono generalmente utilizzati insieme a JavaScript come parte di un'applicazione AJAX.

<input type="submit"> i pulsanti invieranno il modulo in cui si trovano quando l'utente fa clic su di essi, salvo diversamente specificato con JavaScript.

42

Inoltre, i browser possono acquisire il tasto "Invio" su un modulo e inviarlo automaticamente se è presente un pulsante di invio, ma non diversamente.

— Mr. Shiny e New 安宇

2

Lo fanno anche se si dispone di un tipo = "immagine", che può essere utilizzato per attivare l'invio di un modulo quando si fa clic su.

— jishi,

5

Mr. Shiny and New: i moduli possono essere inviati tramite il tasto Invio senza alcun pulsante. È sufficiente concentrarsi su un input di testo, ad esempio.

— Lasar,

3

Puoi usare gli elementi PULSANTE, sebbene (sorpresa sorpresa) ci siano alcuni problemi quando si usa il browser preferito di tutti (IE). Vale la pena sapere però.

4

Questo è ovviamente estremamente vecchio, ma sento la necessità di dare i miei 2 centesimi poiché ritengo che sia un grande calo nell'uso dei tipi di pulsante ... l'evento onsubmit del modulo NON viene generato dagli invii javascript, portando a potenziali incubi di manutenzione.

— mothmonsterman,

20

Un "pulsante" è proprio questo, un pulsante, al quale è possibile aggiungere funzionalità aggiuntive utilizzando Javascript. Un tipo di input "submit" ha la funzionalità predefinita di invio del modulo in cui è inserito (anche se, ovviamente, è ancora possibile aggiungere funzionalità aggiuntive utilizzando Javascript).

— Aistina
fonte

7

Il pulsante non invia il modulo da solo. È un semplice pulsante che viene utilizzato per eseguire alcune operazioni utilizzando javascript, mentre Invia è un tipo di pulsante che per impostazione predefinita invia il modulo ogni volta che l'utente fa clic sul pulsante di invio.

— Sujeet Srivastava
fonte

3

Internet Explorer 8 utilizza effettivamente il primo pulsante che incontra inoltra o pulsante. Invece di indicare facilmente quale è desiderato rendendolo un tipo di input = inviare l'ordine sulla pagina è in realtà significativo.

— Martin Murphy
fonte

3

Va inoltre menzionato che un input denominato di tipo = "submit" verrà inviato anche insieme ai campi con nome dell'altro modulo mentre un input denominato = "button" non lo farà.

Con altre parole, nell'esempio qui sotto, l'ingresso di nome name=button1 NON ottenere presentata mentre l'ingresso di nome name=submit1 SARÀ ottenere presentato.

Modulo HTML di esempio (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

Lo script PHP (checkout.php) che elabora l'azione del modulo sopra:

<?php var_dump($_POST); ?>

Prova quanto sopra sul tuo computer locale creando i due file in una cartella denominata / tmp / test / quindi eseguendo il server web PHP integrato dalla shell:

php -S localhost:3000 -t /tmp/test/

Apri il tuo browser su http: // localhost: 3000 e vedi di persona.

Ci si potrebbe chiedere perché dovremmo inviare un pulsante con nome? Dipende dallo script back-end. Ad esempio il plug-in WordPress di WooCommerce non elaborerà una pagina di checkout pubblicata a meno che non venga inviato anche il Place Orderpulsante con nome. Se si modifica il tipo da pulsante Invia a , questo pulsante non verrà inviato e quindi il modulo di pagamento non verrà mai elaborato.

Questo è probabilmente un piccolo dettaglio, ma sai, il diavolo è nei dettagli.

— Eugen Mihailescu
fonte

È conforme alle specifiche o dipende dal browser?

— Magnus Lind Oxlund,

0

<input type="button">possono essere utilizzati ovunque, non solo all'interno del modulo e non inviano il modulo se si trovano in uno. Molto più adatto con Javascript.

<input type="submit">devono essere utilizzati solo nei moduli e invieranno una richiesta (GET o POST) all'URL specificato. Essi dovrebbero non essere messi in qualsiasi luogo HTML.

0

Il W3C chiarisce le specifiche sull'elemento Button

Il pulsante può essere visto come una classe generica per tutti i tipi di pulsanti senza comportamento predefinito.

W3C

— Mahfoud Boukert
fonte

0

type='Submit'è impostato per inoltrare e ottenere i valori su BACK-END (PHP, .NET ecc.). type='button'rifletterà il normale comportamento dei pulsanti.

— Shashank Malviya
fonte