Quando usare questo esempio
Form contatti con campi allineati, label leggibili e focus accessibile.
Copialo in una pagina di prova, cambia testi e colori, poi integralo nel tuo progetto solo dopo aver capito il ruolo di ogni classe.
HTML
La struttura HTML resta semantica: usa elementi riconoscibili e attributi utili per l’accessibilità.
<form class="demo-form">
<label>Nome <input type="text"></label>
<label>Email <input type="email"></label>
<label>Messaggio <textarea></textarea></label>
<button>Invia</button>
</form>
CSS commentato
Il CSS punta alla semplicità: poche classi, proprietà leggibili e comportamento responsive prevedibile.
.demo-form { display: grid; gap: 14px; }
.demo-form label { display: grid; gap: 6px; font-weight: 700; }
.demo-form input,
.demo-form textarea { padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; font: inherit; }
.demo-form input:focus,
.demo-form textarea:focus { outline: 3px solid #bfdbfe; border-color: #2563eb; }
Commenti didattici
- Le label restano visibili anche quando l’utente scrive.
- `font: inherit` evita campi con font diverso dal resto della pagina.
- Il focus usa sia bordo sia outline per essere più chiaro.
Prova pratica: cambia un solo valore alla volta, per esempio `gap`, `padding` o `border-radius`, e osserva come cambia il componente.
Continua con gli esempi
Apri l’esempio successivo oppure torna alla raccolta completa.