L'elemento del modulo in dettaglio

In un modulo precedente hai imparato come utilizzare l'elemento <form>. In questo modulo scoprirai come funziona un modulo e quando utilizzarlo.

Devi utilizzare un elemento <form>?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Non è sempre necessario inserire i controlli dei moduli 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, poiché non stai archiviando o elaborando dati nel tuo backend.

Tuttavia, nella maggior parte dei casi, quando memorizzi o elabori i dati degli utenti, devi utilizzare l'elemento <form>. Come scoprirai in questo modulo, l'utilizzo di un <form> ti offre molte funzionalità integrate dei browser che altrimenti dovresti creare autonomamente. Un <form> ha anche molte funzionalità di accessibilità integrate per impostazione predefinita. Se vuoi evitare il ricaricamento della pagina quando un utente invia un modulo, puoi comunque utilizzare l'elemento <form>, ma migliorarlo con JavaScript.

Come funziona un <form>?

Hai appreso che un <form> è il modo migliore per gestire i dati utente. A questo punto potresti chiederti come funziona un modulo.

<form> è un contenitore per i controlli dei moduli interattivi.

<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 del modulo?

Quando invii un <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 ed elaborare i dati del modulo? I dati inviati possono essere gestiti da JavaScript sul frontend utilizzando una richiesta GET o da codice sul 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 effettua una richiesta all'URL che corrisponde al 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 altri attributi nell'elemento <form>, ad esempio per decidere se convalidare il modulo (novalidate), se utilizzare il completamento automatico (autocomplete="off") o quale codifica (accept-charset).

Cerca di 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 deve essere /color.

Mostra modulo

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. Un'opzione è 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 è utilizzare <input type="image" alt="Submit" src="submit.png"> per creare un pulsante Invia grafico. Tuttavia, ora che puoi 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 poter caricare più file.

Per assicurarti che gli utenti possano caricare file, è necessaria un'altra modifica: 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, imposta il valore su multipart/form-data. Senza questa codifica, i file non possono essere inviati con una richiesta POST.

Verificare di aver compreso

Metti alla prova le tue conoscenze sull'elemento del modulo

Quale valore per enctype è necessario per inviare i file?

multipart/form-data
🎉
multipart/form-files
Riprova.
form-data
Riprova.
form-files
Riprova.

È possibile inviare dati utente senza un <form>

No
Riprova.
Sì, con JavaScript.
🎉
Sì, con Flash.
Riprova.
Sì, con HTML5.
Riprova.

Come puoi inviare un <form>?

Fai clic su un <button>.
Riprova.
Premi Enter.
Riprova.
Fai clic su un <input type="image">.
Riprova.
Tutte e tre le cose.
🎉

Risorse