Générateur de formulaires CSS

Le formulaire de base

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Veuillez entrer un email valide.</span>
  </label>

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

  <button type="submit" class="button">S'inscrire</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; }

Quatre styles courants

L’étiquette flottante est la plus jolie mais nécessite un balisage ou JavaScript supplémentaire pour détecter l’état vide. Le style contouré est le plus universel.

Liste de contrôle d’accessibilité

• Étiquette visible pour chaque entrée. Ne jamais utiliser un placeholder comme seule étiquette, il disparaît au focus et échoue au contraste.
• <label for> ou <label> englobant. Les deux sont valides ; l’englobant est légèrement plus facile.
• Indicateur de focus. Ne jamais outline: none sans remplacement. Les utilisateurs au clavier en ont besoin.
• Messages d’erreur : liez-les via aria-describedby sur l’entrée. Ne pas utiliser la couleur seule pour marquer les erreurs, inclure un message texte ou une icône.
• Champs requis : utiliser l’attribut required. Ajouter un marqueur visuel (astérisque) dans l’étiquette pour les utilisateurs voyants.
• Types d’entrée : utiliser type="email", type="tel", type="url", type="number". Les claviers mobiles s’adaptent.
• Attributs autocomplete : autocomplete="email", autocomplete="current-password", etc. Économise beaucoup de saisie aux utilisateurs.

États de validation natifs

CSS a des pseudo-classes pour la validité des formulaires :

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (pour les entrées numériques avec min/max)
• :placeholder-shown (vide, placeholder visible)
• :user-invalid (invalide et l’utilisateur a interagi, le bon pour les styles d’erreur)

La pseudo-classe :user-invalid est le moyen le plus propre de montrer les erreurs uniquement après que l’utilisateur a fait quelque chose, évitant les bordures rouges avant l’interaction. Le support a été ajouté dans tous les principaux navigateurs autour de 2023.

État désactivé

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

Les entrées désactivées ne sont pas focalisables ni soumises. Si vous voulez qu’elles soient focalisables pour les lecteurs d’écran, utilisez readonly à la place, le formulaire soumet la valeur mais l’utilisateur ne peut pas l’éditer.