Form e input

I form sono il modo in cui una pagina raccoglie dati dall’utente e li invia da qualche parte — tipicamente a un server. È il capitolo più importante di questo blocco per un corso di reti, perché qui HTML incontra direttamente HTTP.

Struttura di un form

<form action="/invia" method="get">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">

    <button type="submit">Invia</button>
</form>

Tre elementi chiave:

• <form> racchiude tutti i campi. Ha due attributi fondamentali: action (dove vengono inviati i dati) e method (come vengono inviati — lo vediamo tra poco).
• <label for="nome"> è l’etichetta del campo. L’attributo for deve coincidere con l’id dell’<input> a cui si riferisce: cliccando sulla label si attiva anche il campo, ed è essenziale per l’accessibilità.
• <input> è il campo vero e proprio. L’attributo name è quello che conta di più: è la chiave con cui il valore verrà inviato al server (l’id invece serve solo per collegare la label e per CSS/JS).

Tip

Pensa a name come alla chiave di un dizionario Python: il form, quando viene inviato, produce qualcosa concettualmente simile a {"nome": "Andrea"}. Il server riceve quel “dizionario” e ci legge dentro con name.

Tipi di input

<input type="text" name="nome" placeholder="Il tuo nome">
<input type="email" name="email" placeholder="nome@esempio.it">
<input type="password" name="pw">
<input type="number" name="eta" min="0" max="120">
<input type="checkbox" name="iscrizione" checked>
<input type="radio" name="livello" value="base">
<input type="radio" name="livello" value="avanzato">

Il type cambia sia la tastiera/interfaccia che il browser mostra, sia una minima validazione automatica (es. type="email" rifiuta un invio senza @). I radio con lo stesso name formano un gruppo: se ne può scegliere uno solo.

Altri elementi comuni nei form, che non sono <input>:

<textarea name="messaggio" rows="4" cols="30"></textarea>

<select name="corso">
    <option value="python">Python</option>
    <option value="reti">Reti</option>
</select>

GET vs POST: cosa succede davvero

Questo è il punto in cui HTML tocca direttamente ciò che abbiamo studiato in HTTP.

<form action="/cerca" method="get">
    <input type="text" name="q">
    <button type="submit">Cerca</button>
</form>

Con method="get", il browser mette i dati nell’URL stesso, come query string: /cerca?q=reti dove la coppia q=reti è ovviamente la coppianame=value estratta dal form: q è il nome della text input, reti è il valore inserito dall’utente.

<form action="/registrazione" method="post">
    <input type="text" name="nome">
    <input type="password" name="pw">
    <button type="submit">Registrati</button>
</form>

Con method="post" invece i dati viaggiano nel corpo della richiesta, non nell’URL: non sono visibili nella barra degli indirizzi, non finiscono nella cronologia del browser, non c’è un limite pratico di lunghezza.

Quando usare l’uno o l’altro:

Note

L’ultima domanda in particolare spiega bene il diverso utilizzo dei due metodi:

Quando si usa GET, l’URL contiene tutto!! Ogni richiesta dovrebbe generare analogia risposta. Tipicamente GET si usa per fare una ricerca o per impostare dei filtri.

Quando si usa POST, i dati sono nel body della richiesta e dipendono dall’interazione utente con la pagina. Tipicamente POST si usa per inviare dati sensibili o lunghi, quali campi di login, moduli da compilare, etc…

Tip

Usate gli strumenti di sviluppo del browser (scheda Network) per osservare la differenza reale tra una richiesta GET e una POST: con GET vedrete i parametri nell’URL della richiesta, con POST li troverete invece nel corpo.

Campi obbligatori (validazione base del browser)

<input type="text" name="nome" required>
<input type="email" name="email" required>

L’attributo required fa sì che il browser stesso blocchi l’invio se il campo è vuoto, senza bisogno di scrivere codice. È una validazione minima e non sostituisce controlli lato server — e non sostituisce nemmeno la validazione lato client più sofisticata che vedremo con JavaScript più avanti!

Esercizi

Esercizio w121

Crea un form con method="get" che invii una ricerca: un campo di testo con name="q" e un pulsante di invio. Dopo averlo aperto nel browser, prova a inviarlo e osserva cosa appare nell’URL.

Esercizio w122

Crea un form di registrazione con method="post" che contenga: nome (testo), email, password, e un pulsante di invio. Aggiungi required ai campi che secondo te non dovrebbero mai essere lasciati vuoti.

Esercizio w123

Nel seguente form manca il collegamento tra <label> e <input> (l’attributo for non corrisponde a nessun id), e la password viaggia con method="get", il che è sbagliato. Correggi entrambi i problemi:

<form action="/login" method="get">
    <label for="username">Nome utente:</label>
    <input type="text" name="user">

    <label for="password">Password:</label>
    <input type="password" name="pw">

    <button type="submit">Accedi</button>
</form>

Esercizio w124

Crea un form con un <select> con almeno 3 opzioni (es. una scelta tra 3 corsi) e un gruppo di 2 <input type="radio"> con lo stesso name per una scelta binaria (es. “principiante”/“esperto”).