A cosa serve un form
Un form raccoglie dati dall’utente: un modulo di contatto, una ricerca, un login. In questo corso costruiremo form solo HTML, senza elaborazione lato server (niente PHP) — impareremo la struttura e la validazione nativa del browser.
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio" rows="5"></textarea>
<button type="submit">Invia</button>
</form>
<label> associa un’etichetta al campo tramite for (che deve corrispondere all’id del campo): oltre a migliorare l’accessibilità, cliccare sull’etichetta mette il focus sul campo — provalo.
I principali tipi di <input>
Il comportamento di <input> cambia in base al suo attributo type:
type | Cosa crea |
|---|---|
text | campo di testo generico |
email | campo email, con validazione base del formato |
password | campo con caratteri mascherati |
number | campo numerico |
tel | campo per numeri di telefono |
checkbox | casella di spunta (selezione multipla) |
radio | pulsante radio (selezione singola tra opzioni) |
submit | pulsante di invio |
<input type="checkbox" id="privacy" name="privacy" required>
<label for="privacy">Accetto la privacy policy</label>
<input type="radio" id="si" name="conferma" value="si">
<label for="si">Sì</label>
<input type="radio" id="no" name="conferma" value="no">
<label for="no">No</label>
Select e textarea
<label for="categoria">Categoria:</label>
<select id="categoria" name="categoria">
<option value="info">Informazioni</option>
<option value="preventivo">Richiesta preventivo</option>
<option value="altro">Altro</option>
</select>
<textarea> crea un campo di testo multi-riga, per messaggi più lunghi (l’abbiamo già visto nell’esempio iniziale).
Validazione nativa, senza JavaScript
Il browser può validare i campi da solo, con semplici attributi:
required: il campo è obbligatorio.type="email": verifica che il formato assomigli a un’email.minlength/maxlength: lunghezza minima/massima del testo.pattern: un’espressione per formati personalizzati (es. un codice postale).
<input type="text" name="cap" pattern="[0-9]{5}" title="Inserisci un CAP di 5 cifre">
Se un campo obbligatorio è vuoto, o non rispetta il formato richiesto, il browser blocca l’invio e mostra un messaggio — tutto senza scrivere una riga di JavaScript.
Esercitazione pratica
Costruisci un form di contatto completo: nome, email, un menu a tendina con almeno 3 opzioni, una checkbox di consenso e un pulsante di invio. Rendi obbligatori nome ed email.