Utilizzare i moduli per ricevere dati dagli utenti

Apprendi le nozioni di base sull'utilizzo di un modulo sul web con questa introduzione all'elemento modulo.

Supponiamo che tu voglia chiedere alle persone sul tuo sito web qual è il loro animale preferito. Come primo passo, devi avere un modo per raccogliere i dati.

Come puoi farlo con il codice HTML?

In HTML, puoi crearla utilizzando l'elemento modulo (<form>), un <input> con <label> e un <button> per l'invio.

Che cos'è un elemento del modulo?

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

L'elemento del modulo è costituito dal tag di inizio <form>, da attributi facoltativi definiti nel tag di inizio e da un tag finale </form>.

Tra il tag di inizio e di fine, puoi includere elementi del modulo come <input> e <textarea> per diversi tipi di input utente. Nel prossimo modulo scoprirai di più sugli elementi del modulo.

Dove vengono trattati i dati?

Quando viene inviato un modulo (ad esempio, quando l'utente fa clic sul pulsante Invia), il browser effettua una richiesta. Uno script può rispondere a questa richiesta ed elaborare i dati.

Per impostazione predefinita, la richiesta viene inviata alla pagina in cui viene mostrato il modulo.

Supponiamo che tu voglia che uno script in esecuzione su https://web.dev elabora i dati del modulo, come lo faresti? Prova.

Attiva/disattiva risposta

Puoi selezionare la posizione dello script mediante l'attributo action.

<form action="https://example.com/animals">
...
</form>

L'esempio precedente invia una richiesta a https://example.com/animals. Uno script sul backend example.com può gestire le richieste a /animals ed elaborare i dati dal modulo.

Come vengono trasferiti i dati?

Per impostazione predefinita, i dati del modulo vengono inviati come richiesta GET, con i dati inviati aggiunti all'URL. Se un utente invia "rana" nell'esempio riportato sopra, il browser invia una richiesta all'URL seguente:

https://example.com/animals?animal=frog

In questo caso, puoi accedere ai dati sul frontend o sul backend recuperando i dati dall'URL.

Se vuoi, puoi indicare al modulo di utilizzare una richiesta POST modificando l'attributo method.

<form method="post">
...
</form>

Utilizzando POST, i dati vengono inclusi nel corpo della richiesta.

I dati non saranno visibili nell'URL e saranno accessibili solo da uno script di frontend o backend.

Quale metodo dovresti usare?

Ci sono casi d'uso per entrambi i metodi.

Per i moduli che elaborano dati sensibili, utilizza il metodo POST. I dati sono criptati (se utilizzi HTTPS) e sono accessibili solo dallo script di backend che elabora la richiesta. I dati non sono visibili nell'URL. Un esempio comune è il modulo di accesso.

Se i dati sono condivisibili, puoi utilizzare il metodo GET. In questo modo i dati verranno aggiunti alla cronologia del browser così come inclusi nell'URL. Nei moduli di ricerca spesso viene utilizzata questa opzione. In questo modo puoi aggiungere una pagina dei risultati di ricerca ai preferiti.

Ora che conosci l'elemento del modulo, è il momento di scoprire i campi del modulo per rendere i moduli interattivi.

Verifica le tue conoscenze

Verifica le tue conoscenze dell'elemento del modulo

Che aspetto ha il tag di avvio dell'elemento del modulo?

</form>
Quasi, questo è il tag finale dell'elemento <form>.
<form-container>
Riprova.
<form>
🎉
<form-element>
Riprova.

Quale attributo puoi utilizzare per definire dove viene elaborato il <form>?

where
Riprova.
action
Sì, l'attributo action definisce dove viene elaborato il <form>.
href
Riprova.
url
Riprova.

Qual è il metodo di richiesta predefinito?

GET
🎉
POST
Riprova.

Risorse

L'elemento <form>.