Labels de formulaire : dans le champ ou à l'extérieur ?

La réponse courte

Position	Recommandation
Au-dessus du champ	Meilleure pour UX et accessibilité
À gauche du champ	Acceptable, moins scannable
Dans le champ (placeholder seul)	À éviter
Labels flottants	Bon compromis design/UX

Verdict : Labels au-dessus du champ pour la plupart des cas.

Comparaison des options

1. Labels au-dessus (recommandé)

Email
[_______________________]

Mot de passe
[_______________________]

Avantage	Explication
Toujours visible	Pas de confusion
Accessibilité	Lecteurs d’écran OK
Mobile-friendly	Prend la largeur complète
Scanning facile	Lecture verticale naturelle

2. Labels à gauche

Email          [_________________]
Mot de passe   [_________________]

Avantage	Inconvénient
Compact verticalement	Moins de place pour le champ
Look professionnel	Alignement délicat
	Mobile problématique

3. Placeholder seul (à éviter)

[Entrez votre email________]
[Entrez votre mot de passe_]

Problème	Conséquence
Disparaît au focus	”C’était quoi le champ ?”
Mauvaise accessibilité	Lecteurs d’écran
Contraste souvent faible	Difficile à lire
Confusion données/label	Champ déjà rempli ?

4. Labels flottants (Material Design)

Avant focus :
[Entrez votre email________]

Après focus :
Email
[________________________]
    ↑ texte ici

Avantage	Inconvénient
Esthétique	Plus complexe à implémenter
Gain d’espace initial	Animation peut distraire
Label reste visible

Implémentation des labels flottants

HTML

<div class="floating-label">
  <input type="email" id="email" placeholder=" " required>
  <label for="email">Email</label>
</div>

CSS

.floating-label {
  position: relative;
  margin-bottom: 20px;
}

.floating-label input {
  width: 100%;
  padding: 15px 10px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.floating-label label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* Quand le champ a du contenu ou est focus */
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: 5px;
  font-size: 12px;
  color: #007bff;
}

Études et données

Google UX Research

• Labels au-dessus : 20% plus rapide à compléter
• Labels à gauche : Plus d’erreurs d’alignement œil/champ
• Placeholders seuls : +50% de confusion

Nielsen Norman Group

• Labels externes : Meilleure compréhension
• Placeholders : OK comme aide supplémentaire, pas en remplacement

Bonnes pratiques

Label + Placeholder complémentaire

Email
[exemple@domaine.com_____]
      ↑ placeholder = exemple de format

Le placeholder donne un exemple, pas le nom du champ.

Indication des champs obligatoires

Email *
[_______________________]

Téléphone (optionnel)
[_______________________]

Messages d’aide sous le champ

Mot de passe
[_______________________]
Minimum 8 caractères, une majuscule, un chiffre

Regroupement visuel

┌─ Vos coordonnées ──────────────────────┐
│                                        │
│  Prénom                                │
│  [____________________]                │
│                                        │
│  Email                                 │
│  [____________________]                │
│                                        │
└────────────────────────────────────────┘

Cas spécifiques

Formulaire de recherche

[🔍 Rechercher...____________]

→ Placeholder OK car usage évident

Formulaire inline compact

Newsletter : [email________] [OK]

→ Label inline acceptable pour 1 champ

Formulaires mobiles

Toujours labels au-dessus sur mobile :

• Pas d’espace pour labels à gauche
• Champs prennent toute la largeur
• Plus facile à taper

Erreurs courantes

1. Placeholder comme seul label

❌ [Entrez votre nom________]
   Le texte disparaît au focus

✅ Nom
   [_______________________]

2. Labels trop éloignés

❌ Email


   [_______________________]
   Trop d'espace = association floue

✅ Email
   [_______________________]
   Proche = lien clair

3. Contraste insuffisant des placeholders

❌ Placeholder gris clair sur fond blanc (#ccc)
✅ Placeholder gris foncé pour lisibilité (#666)

4. Labels incohérents

❌ Email          (label externe)
   [Mot de passe] (placeholder seul)

✅ Email
   [_______]
   Mot de passe
   [_______]

Accessibilité (WCAG)

Exigences

Critère	Recommandation
Labels	Obligatoires pour chaque champ
Association	for attribut ou imbrication
Contraste	4.5:1 minimum
Placeholders	Complément, pas remplacement

Code accessible

<!-- Méthode 1 : for/id -->
<label for="email">Email</label>
<input type="email" id="email">

<!-- Méthode 2 : imbrication -->
<label>
  Email
  <input type="email">
</label>

<!-- Avec aide -->
<label for="password">Mot de passe</label>
<input type="password" id="password" aria-describedby="pwd-help">
<span id="pwd-help">Minimum 8 caractères</span>

A/B tests recommandés

Test	Métrique
Labels au-dessus vs Labels flottants	Temps complétion
Avec placeholder vs Sans	Erreurs
Labels à gauche vs Au-dessus	Conversion mobile

Checklist labels formulaire

• Labels au-dessus (ou flottants)
• Jamais de placeholder seul
• Association label/champ correcte (for/id)
• Champs obligatoires marqués
• Messages d’aide si nécessaire
• Contraste suffisant
• Test sur mobile
• Test avec lecteur d’écran