L'elemento del modulo in dettaglio

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.

<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

Risorse

• L'elemento HTML del modulo
• Best practice relative al pulsante di invio