Obiettivo
Applicare stile ai campi senza perdere usabilità, focus visibile e ordine visivo.
Questo esercizio è pensato per essere svolto in modo incrementale: prima struttura HTML, poi regole generali, infine dettagli responsive e rifiniture.
Requisiti della traccia
- Campi nome, email, argomento e messaggio.
- Label sempre visibili.
- Stato focus evidente.
- Pulsante finale ben riconoscibile.
Procedura consigliata
- Non usare solo placeholder al posto della label.
- Controlla contrasto tra testo e sfondo.
- Usa `width: 100%` sui campi.
- Raggruppa label e campo in un blocco riutilizzabile.
Commento: lavora sempre su una copia del file. In CSS è più facile capire un errore se modifichi una proprietà alla volta e controlli subito il risultato nel browser.
Base HTML commentata
Puoi partire da questa struttura e completarla con contenuti reali.
<form class="contact-form">
<label>Nome <input type="text" name="nome"></label>
<label>Email <input type="email" name="email"></label>
<label>Messaggio <textarea name="messaggio"></textarea></label>
<button type="submit">Invia richiesta</button>
</form>
CSS di partenza commentato
Le regole seguenti non sono una soluzione unica: servono come base ragionata da adattare al tuo progetto.
.contact-form { display: grid; gap: 16px; max-width: 620px; }
.contact-form label { display: grid; gap: 6px; font-weight: 700; }
.contact-form input,
.contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 12px; font: inherit; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 3px solid #bfdbfe; border-color: #2563eb; }
Controllo finale
- La pagina resta leggibile su smartphone?
- I nomi delle classi descrivono davvero il contenuto?
- Il componente può essere riutilizzato in un’altra pagina?
- Hover e focus sono visibili ma non invadenti?
Continua con gli esercizi
Procedi con la traccia successiva oppure torna all’indice degli esercizi.