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

<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

Risorse

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