Utilizzare il tag <form> senza alcuni
attributi fondamentali è come non utilizzarlo affatto.
Alcuni attributi sono facoltativi, mentre altri sono indispensabili per il
corretto funzionamento modulo.
In questa lezione vedremo uno degli attributi più importanti.
Oltre all'attributo action, visto nella
lezione sui form, è molto importante specificare anche
method=”valore” all'interno del tag <form>.
Questo attributo indica il metodo invio dati con cui i dati inseriti dall'utente
verranno inviati al server.
Impostando method=”get”, i dati del modulo vengono
aggiunti all'indirizzo della pagina (URL) sotto forma di parametri.
I parametri vengono separati dall'URL tramite il simbolo ? e sono organizzati nel formato
nome=valore, utilizzando il valore dell'attributo name assegnato ai campi del modulo.
Ad esempio, se la pagina di destinazione si chiama grazie.html e l'utente inserisce un valore
in un campo con name=”nome”, l'indirizzo potrebbe diventare
grazie.html?nome=Mario.
<form action="grazie.html" method="get">
<input type="text" name="valore1">
<input type="submit" name="invia">
</form>
Il metodo method=”get” è indicato quando i dati devono poter
essere condivisi salvati URL. Un esempio tipico è la barra di ricerca di un motore di ricerca,
dove il testo cercato compare nell'indirizzo della pagina (ad esempio ...?q=parola_ricerca).
In questa fase utilizziamo il motore di ricerca solo come esempio: per elaborare realmente i dati sarà
necessario conoscere anche un linguaggio lato server, come PHP o Node.js.
Poiché i dati sono visibili nell'URL, l'utente può copiarli, salvarli tra i preferiti oppure modificarli manualmente. Per questo motivo il metodo GET non dovrebbe mai essere utilizzato per trasmettere dati riservati sensibili, come password o informazioni personali. Inoltre, la lunghezza dell'URL è limitata dal browser e dal server, quindi GET non è adatto all'invio di grandi quantità dati.
Impostando method=”post”, i dati del modulo vengono inviati
al server nel corpo richiesta HTTP e non vengono aggiunti all'URL della pagina.
Di conseguenza, l'indirizzo visualizzato nel browser rimane invariato.
<form action="grazie.html" method="post">
<input type="text" name="il_tuo_nome"> <!-- Informazione privata -->
<input type="submit" name="invia">
</form>
Il metodo method=”post” è quello più utilizzato nei form.
È consigliato quando devono essere inviati dati personali sensibili, come nome, email o password,
oppure grandi quantità di dati. Anche se le informazioni non compaiono nell'URL, è importante ricordare che
questo non rende automaticamente la trasmissione sicura: per proteggere realmente i dati è necessario
utilizzare una connessione HTTPS sicura.
Nota: questa lezione spiega soltanto come inviare i dati di un modulo. Per riceverli ed elaborarli è necessario utilizzare un linguaggio lato server, come Node.js o PHP, argomenti che verranno affrontati nei corsi dedicati.