Corso di HTML / Struttura dei moduli e differenza tra GET e POST
Un form raggruppa controlli i cui valori vengono inviati dagli utenti. Per capire dove vanno i dati, distinguete gli attributi name dei controlli, la destinazione in action e il metodo di richiesta in method. HTML può creare l'interfaccia di input, ma salvare o recuperare dati richiede un gestore (handler) lato server.
Creare un piccolo modulo di ricerca
L'esempio accetta un termine di ricerca. Sostituite /search con un vero endpoint prima di utilizzarlo su un sito web. L'attributo for dell'etichetta deve corrispondere a id del campo; name stabilisce invece il nome della chiave inviata.
<form action="/search" method="get">
<label for="keyword">Termine cercato</label>
<input id="keyword" name="q" type="search">
<button type="submit">Cerca</button>
</form>L'attributo for dell'etichetta corrisponde a id del campo di input e gli assegna la sua etichetta. name="q" identifica il valore nei dati inviati. L'inserimento di «HTML» generalmente genera un URL che contiene ?q=HTML. Un id senza name può ancora collegare un'etichetta, ma il valore del campo di solito non viene incluso nell'invio.
action indica l'obiettivo; method sceglie come il browser invia i valori. Se entrambi vengono omessi, il modulo viene inviato per impostazione predefinita con GET all'URL corrente. Provate un termine con spazi o lettere non ASCII: la barra degli indirizzi può mostrare una rappresentazione codificata di questi caratteri. Si tratta di un formato di trasporto e non di un segno che l'immissione sia scomparsa.
Scegliere GET o POST
GET inserisce i dati del modulo nella stringa di query dell'URL. È adatto per ricerche e filtri che gli utenti possono salvare come segnalibro o condividere. Non usatelo per inviare password o altri valori sensibili, poiché i dati sono visibili nell'URL. POST invia i dati del modulo nel corpo della richiesta e viene spesso utilizzato per operazioni che modificano lo stato del server, come creare un account o inviare un messaggio. POST non cifra i dati di per sé; trasmissioni sensibili richiedono HTTPS e una gestione appropriata lato server.
<form action="/contact" method="post">
<label for="message">Notizieo</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Invia</button>
</form>Il percorso /contact è illustrativo; senza un handler può restituire un errore. Per provare un GET sul documento corrente, iniziate con il primo modulo, mantenete method="get" e rimuovete il suo attributo action. Una barra iniziale si riferisce alla radice del sito web e non a un endpoint funzionale in un file locale. Non inviate informazioni personali reali a un endpoint di esempio.
Controllate i dati prima di inviarli
Salvate l'esempio completo come inspect-form.html. Omettendo action, la destinazione è il documento corrente. Un'azione scritta esplicitamente deve essere un URL valido e non vuoto, quindi omettete l'attributo invece di scrivere action="" per indicare la pagina corrente.
<!doctype html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esercizio sui dati del modulo</title>
</head>
<body>
<h1>Verifica dei campi inviati</h1>
<form id="inspect-form" method="get">
<p><label for="query">Termine cercato</label>
<input id="query" name="q" value="HTML" required></p>
<p><label for="limit">Numero massimo di risultati</label>
<input id="limit" name="limit" value="5" readonly></p>
<p><label for="coupon">Coupon non disponibile</label>
<input id="coupon" name="coupon" value="DEMO" disabled></p>
<p><label><input type="checkbox" name="news" value="yes" checked> Notizie</label></p>
<button type="submit">Verifica dei valori nell'URL</button>
</form>
</body>
</html>Dopo aver aperto il file, eseguite questa riga nella console degli strumenti per sviluppatori per verificare i nomi e i valori dei campi correnti. FormData è un'interfaccia di programmazione del browser (API, Application Programming Interface) che crea un elenco di coppie nome-valore dal modulo. Questo comando stesso non invia i dati sulla rete né attiva alcuna convalida delle restrizioni.
Array.from(new FormData(document.getElementById("inspect-form")).entries())[["q", "HTML"], ["limit", "5"], ["news", "yes"]]All'inizio, il campo limit in sola lettura è incluso, mentre il campo coupon disabilitato viene omesso. Deselezionando l'opzione “Notizie”, anche la voce scompare. Cancellare il termine di ricerca consente comunque di verificare un valore q vuoto, ma il pulsante per inviare attiva la convalida richiesta. Confrontate la creazione dell'elenco dati con le verifiche interattive durante l'invio.
| Metodo | Esaminare nella rete | Interpretazione |
|---|---|---|
| GET | URL/metodo di richiesta e parametri della richiesta | Nomi e valori sono codificati nell'URL |
| POST | URL/metodo di richiesta e dati del modulo nel corpo della richiesta | Una risposta fallita è separata dal fatto che una richiesta sia stata inviata o meno |
Su una pagina fornita da un server, aprite il pannello Rete, inviate il modulo e controllate la richiesta corrispondente. Un documento locale file:// non è equivalente a una richiesta GET o POST HTTP a un server. Un 404 o 405 può riflettere la destinazione o il metodo supportato; la rimozione dei nomi dei campi o degli attributi di convalida non risolve questo problema.
Regole per gli attributi di invio HTML · Costruttore FormData su MDN
Perché potrebbe mancare un campo nei dati trasmessi?
Un controllo disattivato non può essere modificato e non viene trasmesso. Se desiderate trasmettere un valore non modificabile, verificate se il tipo di controllo supporta readonly. Solo le caselle di controllo selezionate e i pulsanti di opzione scelti trasmettono i loro valori; i campi disattivati vengono invece ignorati. Un caricamento di file richiede impostazioni aggiuntive del modulo e la gestione lato server; aggiungere un campo file a questo esempio da solo non è sufficiente. Verificate le restrizioni che bloccano la trasmissione nella validazione del modulo con campi obbligatori, limiti di lunghezza e intervallo.
Se il risultato è inaspettato, controllate prima l'attributo name di ogni controllo, poi se il controllo è selezionato e non disabilitato, e successivamente se l'URL e il metodo corrispondono al server. Il pannello di rete di un browser può mostrare la richiesta anche se il server risponde con un errore. Una richiesta corretta non significa che il server abbia salvato il valore. Consultate la documentazione dell'elemento form su MDN per i dettagli sull'invio.
