Depuis quelques temps, l’attribut placeholder est supporté par l’ensemble des navigateurs modernes. Cette fonctionnalité, implémentée de mille (mauvaises) manières en détournant l’attribut value, a enfin trouvé la place qui lui revenait dans HTML.

Il est même possible de styler ce texte sur la plupart des navigateurs, si l’on veut bien concéder l’utilisation de sélecteurs quelque peu pimpants :

::-webkit-input-placeholder{}
:-ms-input-placeholder{}
:-moz-placeholder{}

Le comportement est simple : un texte d’aide apparaît dans le champ de texte, lorsque celui-ci est vide. Ce libellé disparaît dès que le focus est placé dans le champ.

Cet attribut n’a pas vocation à remplacer l’élément <label>. Il s’agit d’un indice, d’une aide supplémentaire, et pas d’un intitulé :

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. […] For a longer hint or other advisory text, the title attribute is more appropriate. The placeholder attribute should not be used as an alternative to a label.
— Common input element attributes — HTML5

Traduction (rapide) :

L’attribut placeholder représente un indice (mot ou phrase courte) dont le but est d’aider l’utilisateur à entrer ses données. Cet indice peut être une valeur d’exemple ou une brève description du format attendu. […] Pour un texte d’aide plus long, ou toute autre indication, l’attribut title sera plus approprié. L’attribut placeholder ne devrait pas être utilisé comme alternative à l’élément label.

Sur iOS et OS X (depuis 10.7), une petite variante a été introduite, qui me semble tout à fait intéressante. Le libellé reste affiché au focus, jusqu’au premier caractère tapé. Ce comportement est visible sur Firefox, Chrome et Safari (pas Opera, qui semble implémenter ses propres widgets).

L’attribut placeholder sur OS X

Je trouve ce nouveau comportement intéressant. Il permet d’afficher l’aide plus longtemps, et le risque de confondre le placeholder avec la valeur du champ est le même que sans focus, puisqu’ils sont censés être clairement distingués visuellement.

Seulement voilà : chaque projet est particulier, et une solution, même élégante, ne correspond pas toujours aux besoins du moment. Il peut arriver, par exemple, que le comportement du système ne soit pas celui qui est désiré. Nous avons tous connu ce problème n’est-ce pas ?

Prenons un champ dont le texte est centré. Regardez comme le curseur se faufile, l’air de rien, au beau milieu d’un caractère :

Placeholder centré

Mais enfin Curseur, tu fais n’importe quoi ! La solution est simple, la décision est prise : il faut revenir à l’ancien comportement. Mais il va falloir trouver une ruse, car il est hors de question de revenir à une solution basée sur l’attribut value, avec des classes pour distinguer le focus.

La solution à deux francs

Une solution pourrait être de modifier dynamiquement l’attribut placeholder au focus, à l’aide d’un script. Et pourquoi pas en CSS ? En combinant :focus et :-xx-input-placeholder, il devrait être possible de modifier la couleur du placeholder pour qu’elle corresponde à celle du fond ! Voyons cela :

input:focus::-webkit-input-placeholder { color: #fff; }
input:focus:-moz-placeholder           { color: #fff; }

Placeholder blanc

Ce comportement peut être observé avec Firefox et Safari. La couleur du curseur clignotant correspond à la couleur du champ, ici un gris foncé. Mais pour permettre une bonne lisibilité du texte, ces deux navigateurs vont faire en sorte d’inverser la couleur du texte à l’endroit où se trouve le curseur :

Placeholder blanc, agrandi

Ce qui est tout à fait indésirable dans notre cas.

La solution à trois francs

La solution est maintenant évidente, et permet également d’obtenir une meilleure portabilité, puisqu’elle ne dépend plus de la couleur du fond. Il s’agit de la couleur spéciale transparent.

input:focus::-webkit-input-placeholder { color: transparent; }
input:focus:-moz-placeholder           { color: transparent; }

Placeholder transparent

Accessibilité

Si vous avez pour habitude de traquer les problèmes d’accessibilité, cette technique devrait vous déranger un peu : rendre un texte transparent en CSS, voilà qui sonne faux. Mais n’oublions pas qu’il ne s’agit, encore une fois, que d’un placeholder, une invitation à entrer une valeur, rien d’autre. Ce n’est pas un title, et encore moins un <label>.

Le seul problème que je vois serait plutôt d’ordre ergonomique : un utilisateur d’iOS ou OS X s’attend à voir le placeholder au focus, jusqu’au premier caractère tapé.

Démonstration

Vous pouvez retrouver ces tests sur la page dédiée :

Démonstration

Cette page inaugure également un nouvel espace, code.lesintegristes.net, sur lequel nous publierons désormais nos démonstrations. Ce sous-domaine est hébergé par GitHub, et son contenu est bien entendu sous licence libre.