In un modulo precedente, hai imparato come utilizzare l'elemento <form>
.
In questo modulo imparerai come funziona un modulo e quando utilizzarlo.
Dovresti usare un elemento <form>
?
Non è sempre necessario inserire i controlli del modulo in un elemento <form>
.
Ad esempio, puoi fornire un elemento <select>
per consentire agli utenti di scegliere una categoria di prodotto.
Non è necessario un elemento <form>
qui, perché non archivi o elabori dati sul tuo backend.
Tuttavia, nella maggior parte dei casi, quando archivi o elabori i dati degli utenti,
dovresti usare l'elemento <form>
.
Come scoprirai in questo modulo, l'utilizzo di un <form>
ti offre molte funzionalità integrate dei browser che altrimenti dovresti creare personalmente.
Un <form>
ha anche molte funzioni di accessibilità integrate per impostazione predefinita.
Se vuoi evitare che la pagina venga ricaricata quando un utente invia un modulo,
puoi comunque usare l'elemento <form>
, ma migliorarlo con
JavaScript.
Come funziona <form>
?
Hai imparato che un <form>
è il modo migliore per gestire i dati utente.
Ora ti chiederai come funziona un modulo.
<form>
è un contenitore per i controlli interattivi del modulo.
<form method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<button formaction="/name">Save</button>
</form>
Come funziona l'invio di un modulo?
Quando invii un <form>
, il browser controlla gli attributi <form>
. I dati vengono inviati come GET
o POST
in base all'attributo method
. Se non è presente alcun attributo method
, viene generato
All'URL della pagina corrente viene inviata una richiesta GET
.
Come puoi accedere ai dati del modulo ed elaborarli?
I dati inviati possono essere gestiti da JavaScript sul frontend utilizzando una richiesta GET
.
oppure per codice sul backend utilizzando una richiesta GET
o POST
.
Scopri di più su
tipi di richieste e trasferimento dei dati dei moduli.
Quando il modulo viene inviato, il browser invia una richiesta all'URL, che è il valore dell'attributo action
.
Inoltre, il browser controlla se il pulsante Invia ha un attributo formaction
.
In questo caso, viene utilizzato l'URL definito lì.
Inoltre, il browser cerca attributi aggiuntivi nell'elemento <form>
,
Ad esempio, per decidere se il modulo deve essere convalidato (novalidate
),
utilizzare il completamento automatico (autocomplete="off"
) o la codifica da utilizzare (accept-charset
).
Prova a creare un modulo in cui gli utenti possono inviare il loro colore preferito.
I dati devono essere inviati come richiesta POST
e l'URL in cui verranno elaborati i dati deve essere /color
.
Una possibile soluzione è utilizzare questo modulo:
<form method="post" action="/color"> <label for="color">What is your favorite color?</label> <input type="text" name="color" id="color"> <button>Save</button> </form>
Assicurati che gli utenti possano inviare il modulo
Esistono due modi per inviare un modulo.
Puoi fare clic sul pulsante Invia o premere Enter
mentre utilizzi qualsiasi controllo del modulo.
Puoi aggiungere un pulsante Invia in vari modi.
Una possibilità è utilizzare un elemento <button>
all'interno del modulo.
Se non utilizzi type="button"
, funziona come un pulsante Invia.
Un'altra opzione è utilizzare <input type="submit" value="Submit">
.
Una terza opzione è usare <input type="image" alt="Submit" src="submit.png">
,
per creare il pulsante grafico Invia.
Tuttavia, ora che puoi creare pulsanti grafici con CSS, sconsigliamo di usare type="image"
.
Consenti agli utenti di inviare file
Usa <input type="file">
per consentire agli utenti di caricare e inviare file, se necessario.
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
Innanzitutto, aggiungi al modulo un elemento <input>
con type="file"
.
Aggiungi l'attributo multiple
se gli utenti devono essere in grado di caricare più file.
È necessaria un'altra modifica per garantire che gli utenti possano caricare file: imposta l'attributo enctype
nel modulo.
Il valore predefinito è application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Per assicurarti che i file possano essere inviati, modifica l'impostazione in multipart/form-data
.
Senza questa codifica, non è possibile inviare file con una richiesta POST
.
Verifica le tue conoscenze
Verifica le tue conoscenze degli elementi del modulo
Quale valore per enctype
è necessario per inviare i file?
multipart/form-files
multipart/form-data
form-data
form-files
È possibile inviare dati utente senza un <form>
Come si invia un <form>
?
<button>
.Enter
.<input type="image">
.