Introduzione
Un modulo HTML non serve soltanto a mostrare campi compilabili. Il suo scopo principale è raccogliere dati e inviarli a un server in una forma comprensibile. Per ottenere questo risultato, ogni controllo deve essere configurato correttamente con attributi come name, value, id e required.
In questo tutorial realizzeremo un modulo di richiesta informazioni per un evento. Useremo un campo di testo, un indirizzo email, una textarea, un select, alcune checkbox e un gruppo di pulsanti radio. L’obiettivo non è solo visualizzare i controlli, ma capire quali dati vengono effettivamente inviati quando l’utente preme il pulsante di invio.
Un concetto fondamentale è la differenza tra id e name. L’attributo id identifica un elemento nella pagina e viene usato, ad esempio, dall’attributo for dell’etichetta. L’attributo name, invece, rappresenta la chiave con cui il valore viene trasmesso al server. Un controllo senza name, nella maggior parte dei casi, non produce alcun dato utile durante l’invio.
Codice completo
<form action="/registrazione" method="post">
<fieldset>
<legend>Richiesta informazioni sull´evento</legend>
<p>
<label for="nome">Nome completo</label>
<input
type="text"
id="nome"
name="nome"
autocomplete="name"
required>
</p>
<p>
<label for="email">Indirizzo email</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required>
</p>
<p>
<label for="sessione">Sessione preferita</label>
<select id="sessione" name="sessione" required>
<option value="">Seleziona una sessione</option>
<option value="html-base">HTML di base</option>
<option value="accessibilita">Accessibilità web</option>
<option value="performance">Performance frontend</option>
</select>
</p>
<fieldset>
<legend>Modalità di partecipazione</legend>
<label>
<input
type="radio"
name="modalita"
value="presenza"
required>
In presenza
</label>
<label>
<input
type="radio"
name="modalita"
value="online">
Online
</label>
</fieldset>
<fieldset>
<legend>Argomenti di interesse</legend>
<label>
<input
type="checkbox"
name="argomenti"
value="html">
HTML semantico
</label>
<label>
<input
type="checkbox"
name="argomenti"
value="css">
CSS moderno
</label>
<label>
<input
type="checkbox"
name="argomenti"
value="javascript">
JavaScript
</label>
</fieldset>
<p>
<label for="messaggio">Domande o note aggiuntive</label>
<textarea
id="messaggio"
name="messaggio"
rows="5"
maxlength="500"
placeholder="Scrivi qui il tuo messaggio"></textarea>
</p>
<p>
<label>
<input
type="checkbox"
name="privacy"
value="accettata"
required>
Accetto l´informativa sulla privacy
</label>
</p>
<button type="submit">Invia richiesta</button>
</fieldset>
</form>Spiegazione
Il contenitore form
L’elemento form definisce il modulo. L’attributo action indica l’indirizzo del programma o dell’endpoint che riceverà i dati. Con method="post", i valori vengono inviati nel corpo della richiesta HTTP, soluzione adatta per dati personali o quantità di testo più consistenti. Il metodo get, invece, aggiunge i dati all’URL ed è più indicato per ricerche o filtri non riservati.
Input di testo e textarea
L’input con type="text" raccoglie una singola riga. L’input email offre una validazione di base del formato e può attivare una tastiera ottimizzata sui dispositivi mobili. La textarea è invece destinata a contenuti multilinea. L’attributo maxlength limita il numero di caratteri inseribili e aiuta a mantenere prevedibili le dimensioni del dato.
Select e option
In un elemento select, il testo visibile all’utente può essere diverso dal valore effettivamente inviato. Per esempio, l’utente vede “Accessibilità web”, mentre il server riceve accessibilita. L’opzione iniziale con value="" funziona come segnaposto e, insieme a required, obbliga l’utente a scegliere una voce reale.
Checkbox e radio
I pulsanti radio rappresentano scelte alternative. Per appartenere allo stesso gruppo devono condividere lo stesso attributo name. In questo caso il server riceverà una sola coppia chiave-valore, come modalita=online.
Le checkbox permettono invece più selezioni. Le tre checkbox degli argomenti usano lo stesso name e valori diversi. Se l’utente seleziona HTML e JavaScript, il server può ricevere dati equivalenti a argomenti=html e argomenti=javascript. Una checkbox non selezionata normalmente non viene inviata.
Fieldset e legend
fieldset raggruppa controlli logicamente collegati, mentre legend descrive il gruppo. Questa struttura è particolarmente utile per radio e checkbox, perché rende chiaro il significato complessivo delle opzioni.
Best practice
- Usa sempre un attributo name significativo per ogni controllo che deve essere inviato.
- Collega le etichette agli input tramite for e id, oppure inserisci direttamente il controllo dentro label.
- Assegna valori brevi e stabili a value; il backend dovrebbe basarsi su questi valori e non sul testo visualizzato.
- Usa required solo per dati realmente indispensabili, evitando moduli inutilmente difficili da completare.
- Non considerare la validazione HTML sufficiente per la sicurezza: il server deve validare, normalizzare e autorizzare ogni dato ricevuto.
- Per informazioni sensibili usa sempre HTTPS e non inserire dati riservati nell’URL tramite il metodo GET.
- Imposta autocomplete quando il browser può aiutare l’utente a compilare più rapidamente i campi.
- Verifica anche i casi limite: nessuna checkbox selezionata, testo molto lungo, scelta mancante o valori modificati manualmente.
Riepilogo
Un modulo ben progettato deve essere utile sia all’utente sia al server. id e label migliorano il collegamento visivo e semantico, mentre name e value determinano i dati trasmessi. I radio condividono il nome per creare una scelta esclusiva; le checkbox possono condividere il nome per rappresentare più valori. Select, textarea e input completano la raccolta di informazioni diverse, mentre fieldset e legend organizzano i gruppi.
Prima di collegare il modulo a un backend, prova a osservare quali controlli vengono inviati e quali vengono ignorati. Questo semplice test aiuta a individuare rapidamente campi privi di name, valori errati e checkbox non gestite correttamente.