Generatore di Moduli CSS

Il modulo di base

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Inserisci un'email valida.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Iscriviti</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Quattro stili comuni

L’etichetta flottante è la più bella ma richiede markup extra o JavaScript per rilevare lo stato vuoto. Contornato è il più universale.

Lista di controllo per l’accessibilità

• Etichetta visibile per ogni input. Non usare mai il placeholder come unica etichetta, scompare al focus e fallisce il contrasto.
• <label for> o <label> avvolgente. Entrambi sono validi; l’avvolgente è leggermente più facile.
• Indicatore di focus. Non usare mai outline: none senza una sostituzione. Gli utenti della tastiera ne hanno bisogno.
• Messaggi di errore: collegali tramite aria-describedby sull’input. Non usare solo il colore per contrassegnare gli errori, includere un messaggio di testo o un’icona.
• Campi obbligatori: usa l’attributo required. Aggiungi un marcatore visivo (asterisco) nell’etichetta per gli utenti vedenti.
• Tipi di input: usa type="email", type="tel", type="url", type="number". Le tastiere mobili si adattano.
• Attributi autocomplete: autocomplete="email", autocomplete="current-password", ecc. Risparmia agli utenti molto tempo di digitazione.

Stati di validazione nativi

CSS ha pseudo-classi per la validità del modulo:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (per input numerici con min/max)
• :placeholder-shown (vuoto, placeholder visibile)
• :user-invalid (non valido e l’utente ha interagito, quello giusto per gli stili di errore)

La pseudo-classe :user-invalid è il modo più pulito per mostrare errori solo dopo che l’utente ha fatto qualcosa, evitando bordi rossi pre-interazione. Il supporto è arrivato in tutti i principali intorno al 2023.

Stato disabilitato

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Gli input disabilitati non sono focalizzabili o inviabili. Se vuoi che siano focalizzabili per i lettori di schermo, usa readonly invece, il modulo invia il valore ma l’utente non può modificarlo.