L'elemento modulo in dettaglio

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

Devi utilizzare 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, in quanto non memorizzi o elabori dati sul backend.

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

Come funziona <form>?

Hai scoperto che un <form> è il modo migliore per gestire i dati utente. A questo punto ti starai chiedendo 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 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 ai dati del modulo ed elaborarli? I dati inviati possono essere gestiti da JavaScript nel frontend, con una richiesta GET, o dal codice nel backend, con una richiesta GET o POST. Scopri di più su tipi di richieste e trasferimento dei dati del modulo.

Quando il modulo viene inviato, il browser effettua una richiesta all'URL che è il valore dell'attributo action. Inoltre, il browser verifica se il pulsante Invia ha un attributo formaction. In questo caso, viene utilizzato l'URL definito.

Inoltre, il browser cerca attributi aggiuntivi nell'elemento <form>, ad esempio per decidere se il modulo deve essere convalidato (novalidate), se deve essere utilizzato il completamento automatico (autocomplete="off") o quale codifica deve essere utilizzata (accept-charset).

Prova a creare un modulo in cui gli utenti possano indicare il loro colore preferito. I dati devono essere inviati come richiesta POST e l'URL in cui vengono elaborati deve 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>

Assicurarsi 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.

Utilizza sempre un linguaggio che inviti all'azione quando crei il pulsante Invia. Ad esempio, Procedi al pagamento o Salva modifiche. In questo modo, gli utenti capiscono i passaggi successivi 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 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 grafico Invia. Tuttavia, ora che puoi creare pulsanti grafici con CSS, non è consigliabile utilizzare type="image".

Infine, evita di aggiungere timeout. Concedi agli utenti tutto il tempo che vogliono per inviare un modulo. I timeout causano la perdita di dati e frustrano gli utenti. Leggi le linee guida sul timeout dei moduli W3C.

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.

È 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 che i file possano essere inviati, impostalo su multipart/form-data. Senza questa codifica, i file non possono essere inviati con una richiesta POST.

Verifica la tua comprensione

Testa le tue conoscenze sull'elemento del modulo

Risorse

• L'elemento HTML del modulo
• Best practice per il pulsante Invia