Utilizzare i moduli per ricevere dati dagli utenti

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

Supponiamo che tu voglia chiedere agli utenti del tuo sito web qual è il loro animale preferito. Come primo passo, devi trovare un modo per raccogliere i dati.

In HTML, puoi creare questo elemento utilizzando l'elemento modulo (<form>), un <input> con un <label> e un pulsante di invio <button>.

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

Che cos'è un elemento del modulo?

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

Tra il tag di apertura e quello di chiusura, puoi includere elementi del modulo come <input> e <textarea> per diversi tipi di input dell'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 visualizzato il modulo.

Supponiamo che tu voglia che uno script venga eseguito alle ore https://web.dev per elaborare i dati del modulo. Come faresti? Provalo su CodePen.

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

L'esempio precedente effettua una richiesta a https://example.com/animals. Uno script nel backend di example.com può gestire le richieste a /animals ed elaborare i dati del 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 precedente, il browser invia una richiesta al seguente URL:

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

In questo caso, puoi accedere ai dati nel frontend o nel backend recuperandoli dall'URL.

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

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

Se utilizzi POST, i dati vengono inclusi nel corpo della richiesta.

I dati non saranno visibili nell'URL e sarà possibile accedervi solo da uno script frontend o backend.

Quale metodo dovresti utilizzare?

Esistono 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 accessibili solo allo script di backend che elabora la richiesta. I dati non sono visibili nell'URL. Un esempio comune è un modulo di accesso.

Se i dati sono condivisibili, puoi utilizzare il metodo GET. I dati vengono poi aggiunti alla cronologia del browser, in quanto sono inclusi nell'URL. I moduli di ricerca spesso utilizzano questo metodo. In questo modo puoi aggiungere una pagina dei risultati di ricerca ai preferiti.

Ora che hai imparato a conoscere l'elemento del modulo, è il momento di scoprire i campi del modulo per rendere i tuoi moduli interattivi.

Verifica la comprensione

Metti alla prova le tue conoscenze sull'elemento del modulo

Risorse

L'elemento <form>.