Corso HTML · Impariamo a creare pagine web

Lezione 4

Form e campi di input
<form> <input> <select>
A cosa serve

La pagina dove l'utente scrive

Caselle da compilare, scelte da fare, un pulsante da premere. Tutto ciò che si compila va dentro il tag <form>.

⌨️
Caselle di testo
nome, email, password…
☑️
Scelte
checkbox, radio, menu a tendina
🔘
Pulsanti
invia, azzera
Lezione 4 — Form e campi di input02 / 12
Il contenitore

Il tag <form>

Tutti i campi vanno dentro il form, tra apertura e chiusura.

<form>
... qui dentro tutti i campi ...
</form>
Lezione 4 — Form e campi di input03 / 12
Il campo più comune

La casella di testo

<input type="text"
name="nome"
size="30"
maxlength="40">
come si vede
Nome:
Mario
Lezione 4 — Form e campi di input04 / 12
Cambia il type, cambia il campo

I tipi di <input>

type="text"
type="password"
••••••
type="checkbox"
✓accetto
type="radio"
sìno
type="date"
28/06/2026 📅
type="submit"
Invia
Lezione 4 — Form e campi di input05 / 12
La differenza che il prof verifica

Checkbox o radio?

checkbox
più scelte insieme
✓Pizza ✓Pasta
radio
una sola scelta
Maschio Femmina
stesso name = stesso gruppo!
Lezione 4 — Form e campi di input06 / 12
Tante scelte, poco spazio

Il menu a tendina <select>

<select name="classe">
<option>1A</option>
<option selected>3B</option>
<option>5C</option>
</select>
come si vede
Classe:
3B ▾
Lezione 4 — Form e campi di input07 / 12
Per i testi lunghi

L'area di testo <textarea>

<textarea rows="4"
cols="30">
testo iniziale...
</textarea>
// ha la chiusura!
come si vede
Messaggio:
Scrivi qui...
Lezione 4 — Form e campi di input08 / 12
Far capire cosa scrivere

Metti sempre un'etichetta

✗ campo senza etichetta
l'utente non sa cosa scrivere
✓ con etichetta davanti
Indirizzo email:
Email: <input type="text" name="email">
Lezione 4 — Form e campi di input09 / 12
Chiudere il form

I pulsanti

<input type="submit" value="Invia">
invia i dati
<input type="reset" value="Azzera">
svuota tutti i campi
come si vede
Invia Azzera
Lezione 4 — Form e campi di input10 / 12
Riepilogo

Cassetta degli attrezzi

Contenitore<form> ... </form>
Casella di testo<input type="text" name size>
Password / datatype="password" · type="date"
Scelte multiple / unicatype="checkbox" · type="radio"
Menu a tendina<select><option>
Testo lungo<textarea rows cols>
Pulsantitype="submit" · type="reset"
Lezione 4 — Form e campi di input11 / 12
<form>
Pratica guidata

Ora tocca a te

Il modulo «Iscrizione alla gita»
1Caselle nome ed email, ognuna con la sua etichetta
2Un gruppo radio, un checkbox e un <select>
3I pulsanti Invia e Azzera
Poi apri l'esercizio interattivo e costruisci il modulo. →