<input type="submit">

Gli elementi <input type="submit"> vengono visualizzati come pulsanti. Quando si verifica l'evento click (in genere perché l'utente ha fatto clic sul pulsante), l' interprete tenta di inviare il modulo al server.

Gli attributi di questo elemento includono gli attributi globali.

Valore

L'attributo value di un elemento <input type="submit"> contiene una stringa che viene visualizzata come etichetta del pulsante. I pulsanti non hanno un valore vero altrimenti.

Impostazione dell'attributo value

<input type="submit" value="Invia">

Omissione dell'attributo value

Se non specifichi un attributo value, il pulsante avrà un'etichetta predefinita, scelta dall'interprete. È probabile che questa etichetta sia qualcosa sulla falsariga di "Invia" o "Invia query". Ecco un esempio di un pulsante di invio con un'etichetta predefinita nel tuo browser:

<input type="submit">

Attributi aggiuntivi

Oltre agli attributi condivisi da tutti gli elementi <input>, gli <input type="submit"> supportano i seguenti attributi.

formaction

Una stringa che indica l'URL a cui inviare i dati. Questo ha la precedenza sull'attributo action dell'elemento <form> che possiede l'<input>.

Questo attributo è disponibile anche sugli elementi <input type="image"> e <button>.

formenctype

Una stringa che identifica il metodo di codifica da utilizzare quando si inviano i dati del modulo al server. Ci sono tre valori consentiti:

application/x-www-form-urlencoded

Questo, il valore predefinito, invia i dati del modulo come una stringa dopo la codifica URL del testo utilizzando un algoritmo come encodeURI().

multipart/form-data

Utilizza l'API FormData per gestire i dati, consentendo l'invio dei file al server. È necessario utilizzare questo tipo di codifica se il modulo include elementi <input type="file">

text/plain

Testo normale; per lo più utile solo per il debug, quindi puoi facilmente vedere i dati che devono essere inviati.

Se specificato, il valore dell'attributo formenctype sovrascrive l'attributo action del modulo proprietario .

Questo attributo è disponibile anche sugli elementi <input type="image"> e <button>.

formmethod

Una stringa che indica il metodo HTTP da utilizzare durante l'invio dei dati del modulo; questo valore sovrascrive qualsiasi attributo method fornito nel modulo proprietario. I valori ammessi sono:

get

Un URL viene costruito iniziando con l'URL fornito dall'attributo formaction o action, aggiungendo un punto interrogativo ("?"), quindi aggiungendo i dati del modulo, codificati come descritto dall'attributo formenctype o enctype del modulo. Questo URL viene quindi inviato al server utilizzando unarichiesta get HTTP. Questo metodo funziona bene per moduli semplici che contengono solo caratteri ASCII e non hanno effetti collaterali. Questo è il valore predefinito.

post

I dati del modulo sono inclusi nel corpo della richiesta che viene inviata all'URL fornito dall'attributo formaction o action utilizzando un metodo post HTTP .Questo metodo supporta dati complessi e file allegati.

dialog

Questo metodo viene utilizzato per indicare che il pulsante chiude la finestra di dialogo a cui è associato l'input e non trasmette affatto i dati del modulo.

Questo attributo è disponibile anche sugli elementi <input type="image"> e <button>.

formnovalidate

Un attributo booleano che, se presente, specifica che il modulo non deve essere convalidato prima dell'invio al server. Questo sovrascrive il valore dell'attributo novalidate nel modulo proprietario dell'elemento.

Questo attributo è disponibile anche sugli elementi <input type="image"> e <button>.

formtarget

Una stringa che specifica un nome o una parola chiave che indica dove visualizzare la risposta ricevuta dopo l'invio del modulo. La stringa deve essere il nome di un contesto di navigazione (ovvero una scheda, una finestra o <iframe>. Un valore specificato qui sovrascrive qualsiasi destinazione fornita dall'attributo target sul <form> proprietario di questo input.

Oltre ai nomi effettivi di schede, finestre o frame inline, ci sono alcune parole chiave speciali che possono essere utilizzate:

_self

Carica la risposta nello stesso contesto di navigazione di quello che contiene il modulo. Questo sostituirà il documento corrente con i dati ricevuti. Questo è il valore predefinito utilizzato se non ne viene specificato nessuno.

_blank

Carica la risposta in un nuovo contesto di navigazione senza nome. Si tratta in genere di una nuova scheda nella stessa finestra del documento corrente, ma può differire in base alla configurazione dell'agente utente.

_parent

Carica la risposta nel contesto di navigazione padre di quello corrente. Se non esiste un contesto padre, si comporta come _self.

_top

Carica la risposta nel contesto di navigazione di primo livello; questo è il contesto di navigazione che è l'antenato più in alto del contesto corrente. Se il contesto corrente è il contesto più in alto, si comporta come _self.

Questo attributo è disponibile anche sugli elementi <input type="image"> e <button>.

Utilizzo dell'input di tipo "submit"

In <input type="submit"> i pulsanti vengono utilizzati per inviare i moduli. Se vuoi creare un pulsante personalizzato e poi personalizzare il comportamento utilizzando JavaScript, devi utilizzare <input type="button">, o meglio ancora, un elemento <button>.

Se scegli di utilizzare gli elementi <button> per creare i pulsanti nel tuo modulo, tienilo a mente: se c'è unsolo uno <button> all'interno del <form>, quel pulsante verrà trattato come il pulsante "invia". Quindi dovresti avere l'abitudine di specificare espressamente quale pulsante è il pulsante di invio.

Un semplice pulsante di invio

<form>
  <div>
    <label for="esempio">Inserisci del testo</label>
    <input id="esempio" type="text" name="text">
  </div>
  <div>
    <input type="submit" value="Invia">
  </div>
<form>

Al momento dell'invio, la coppia nome/valore dati viene inviata al server. In questo caso, la stringa sarà text=usertext, dove "usertext" è il testo inserito dall'utente, codificato per preservare i caratteri speciali. Dove e come vengono inviati i dati dipende dalla configurazione del <form>.

Disabilitazione e abilitazione di un pulsante di invio

Per disabilitare un pulsante di invio, specifica l'attributo globale disabled su di esso, in questo modo:

<input type="submit" value="Invia">