Form contatto
Campi input e textarea con focus visibile.
Interazione
Form CSS
I form raccolgono dati. Un buon CSS deve renderli chiari, leggibili e facili da compilare.
Teoria rapida
LabelSpiega il campo.
FocusMostra il campo attivo.
FeedbackAiuta a correggere errori.
Esempi interattivi
Modifica il codice e osserva l’anteprima live.
input:focus
Verifica
Quiz su Form CSS
Rispondi alle domande per controllare subito la comprensione dell’argomento.
1. A cosa serve una label?
2. Quale pseudo-classe indica un campo attivo?
3. Per migliorare accessibilità il focus deve essere...
4. Quale elemento crea un campo multi-riga?
5. Quale proprietà rimuove il bordo predefinito di focus?
6. È bene usare placeholder al posto della label?
Esercitazione libera
Laboratorio libero: Form CSS
Parti dagli esempi della pagina, modifica il codice e crea una variante personale. Salva una copia del codice quando ottieni il risultato desiderato.
- Aggiungi un campo telefono.
- Crea uno stato :focus diverso per input e textarea.
- Aggiungi un messaggio di errore sotto un campo.
- Crea un form login con email e password.