In un modulo precedente hai imparato come utilizzare l'elemento <form>
.
In questo modulo imparerai come funziona un modulo e quando.
Vuoi usare un elemento <form>
?
Non è sempre necessario inserire i controlli del modulo in un elemento <form>
.
Ad esempio, potresti fornire un elemento <select>
per consentire agli utenti di scegliere una categoria di prodotto.
Non è necessario un elemento <form>
qui, perché non stai archiviando o elaborando dati nel backend.
Tuttavia, nella maggior parte dei casi, quando archivi o elabori i dati degli utenti, devi utilizzare l'elemento <form>
.
Come scoprirai in questo modulo, l'utilizzo di <form>
offre molte funzionalità integrate nei browser, che altrimenti dovresti creare autonomamente.
Un <form>
ha anche molte funzioni di accessibilità integrate per impostazione predefinita.
Se vuoi evitare di ricaricare la pagina quando un utente invia un modulo, puoi comunque utilizzare l'elemento <form>
, ma migliorarlo con JavaScript.
Come funziona <form>
?
Hai imparato che <form>
è il modo migliore per gestire i dati utente.
Potresti chiederti ora come funziona un modulo.
<form>
è un contenitore per i controlli interattivi dei moduli.
<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 moduli?
Quando invii un valore <form>
, il browser controlla gli attributi <form>
. I dati vengono inviati come richiesta GET
o POST
in base all'attributo method
. Se non è presente alcun attributo method
, viene effettuata una richiesta GET
all'URL della pagina corrente.
Come puoi accedere ai dati del modulo ed elaborarli?
I dati inviati possono essere gestiti tramite JavaScript sul frontend utilizzando una richiesta GET
o mediante codice nel backend utilizzando una richiesta GET
o POST
.
Scopri di più sui tipi di richieste e sul trasferimento dei dati dei moduli.
Quando il modulo viene inviato, il browser invia una richiesta all'URL che rappresenta 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 al suo interno.
Inoltre, il browser cerca attributi aggiuntivi nell'elemento <form>
, ad esempio per decidere se convalidare il modulo (novalidate
), usare il completamento automatico (autocomplete="off"
) o la codifica da utilizzare (accept-charset
).
Prova a creare un modulo in cui gli utenti possano inviare il loro colore preferito.
I dati devono essere inviati come richiesta POST
e l'URL in cui verranno elaborati i dati dovrebbe 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 un controllo modulo.
Puoi aggiungere un pulsante Invia in vari modi.
Un'opzione è utilizzare un elemento <button>
all'interno del modulo.
Se non utilizzi type="button"
, funzionerà come pulsante Invia.
Un'altra opzione è utilizzare <input type="submit" value="Submit">
.
La terza opzione prevede l'uso di <input type="image" alt="Submit" src="submit.png">
,
per creare un pulsante grafico Invia.
Tuttavia, ora che è possibile creare pulsanti grafici con CSS, non è consigliabile utilizzare type="image"
.
Consenti agli utenti di inviare file
Utilizza <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 un elemento <input>
con type="file"
al modulo.
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 i file: imposta l'attributo enctype
sul modulo.
Il valore predefinito è application/x-www-form-urlencoded
.
<form method="post" enctype="multipart/form-data">
…
</form>
Per assicurarti di poter inviare i file, modifica il valore in multipart/form-data
.
Senza questa codifica, non è possibile inviare file con una richiesta POST
.
Verifica le tue conoscenze
Verifica le tue conoscenze dell'elemento del modulo
Quale valore per enctype
è necessario per inviare i file?
multipart/form-data
multipart/form-files
form-data
form-files
È possibile inviare i dati utente senza un <form>
Come si invia un <form>
?
<button>
.Enter
.<input type="image">
.