Utilizzare i moduli per ricevere dati dagli utenti

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

Immagina di voler chiedere agli utenti sul tuo sito web qual è il loro animale preferito. Come primo passo, devi trovare un modo per raccogliere i dati.

Come puoi fare tutto questo con l'HTML?

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

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>, attributi facoltativi definiti nel tag di inizio e un tag di fine </form>.

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

Dove vengono elaborati 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 effettuata alla pagina in cui viene visualizzato il modulo.

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

<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 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 sul frontend o sul backend recuperando i dati 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 saranno accessibili solo da uno script frontend o backend.

Quale metodo dovresti usare?

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 sono accessibili solo dallo 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. In questo modo i dati verranno aggiunti alla cronologia del browser così come sono inclusi nell'URL. Nei moduli di ricerca viene spesso utilizzato questo metodo. In questo modo, puoi aggiungere ai preferiti una pagina dei risultati di ricerca.

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

Verifica le tue conoscenze

Verifica le tue conoscenze degli elementi del modulo

Risorse

L'elemento <form>.