TL;DR ? Dépôt GitHub, la maquette hébergée sur GitHub et bien évidemment, vous pouvez l'utiliser dans cette page et donc participer au débat.
Ce projet de portage a été rendu public le 13 Novembre 2013, pour la sortie de Dotclear 2.6 et pour l'anniversaire de Kozlika. Annoncé sur le forum à la sortie du billet.

En général, je ne glose pas trop sur les développements que j'utilise pour mon blog. Je me suis rendu compte que par rapport à des confrères, j'étais très timide sur mes travaux. C'est une erreur. De même, j'aime bien prendre mon temps et réfléchir longuement sur des éléments d'interfaces.
C'est la vue de cette animation de Matt. D. Smith qui me donne envie de me croire webdesigner

Avouez que ce mockup est superbe, son animation hypnotique, promet des lendemains qui chantent, et qu'il est sexy comme une jeune femme aux yeux revolvers qui chevauche un fougueux cabriolet cheveux au vent.
Excusez-moi, je crois que je m'égare. Gare au Garou. Et garons-nous sur le bas-côté.

L'apparition de cette animation date d'un peu après une très forte remise en cause par Apple de son interface mobile iOS. En soit, il y a eu énormément de discussions passionnantes sur ce mockup, à commencer par son auteur qui s'en est expliqué sur son blog. Il y eu aussi de nombreux ports, mais la plupart travaillaient sur un usage peu modéré du javascript. Vous le verrez plus loin pourquoi je pense que ce n'est pas une solution idéale.

État des lieux

Je vais tenter d'appliquer ce principe de formulaire dans l'excellent thème Ductile pour Dotclear qui a la class de la simplicité, l'élégance du responsive, le style de la personnalisation et la french-touch de Kozlika.
Kozlika a fait un superbe travail de design, mais il faut néanmoins reconnaître que le code HTML du formulaire de commentaire de Dotclear n'a pas bougé depuis… 2005. Du moins, dans la version reprise en 2013 pour construire le thème actuel de mon blog.

Depuis, on a eu le brouillon WebForms2, son polyfill JS webforms2.js, son implémentation native dans Firefox puis Safari, l'arrivée de Chrome et l'implémentation native dans MSIE. Donc j'ai mis type="email/url", maxlenght="255" et surtout required là où ils étaient parfaitement justifié. Vivent les validations côté client.

Ensuite, j'ai transformé le bouton <input type="submit" /> en un réel <button type="submit"></>, tout en sortant le texte signifiant de la valeur où il n'a rien à faire. Là aussi, les obstacles étaient levés depuis un temps.

Bref, il étant temps de moderniser ce bout de code.

Damnation et implémentation

Je vais essayer de le faire le plus possible sans une once de javascript. Cela peut paraître contradictoire pour un développeur, mais à mon sens,

1. plus un code est simple, plus il est parfait ;
2. émuler ce que l'on peut faire en natif fait perdre du temps ;
3. être au plus proche des standards garanti la pérennité ;

Donc → Plus on revient vers un fonctionnement “naturel” du navigateur ou du serveur, plus on est sûr de la stabilité de ce que nous construisons.

Et surtout que l'Inspecteur Dirty Hacky ne me refasse pas le portrait

Le meilleur exemple que je puisse donner, c'est l'attribut placeholder="". Trop peu d'entre vous se souviennent du temps où l'on essayait de créer le comportement placeholder en javascript : Ça plantait, des fois ça merdait quand on cliquait pour mettre . Quand Apple a intégré placeholder dans le moteur Webkit pour l'application iTunes, on ne se doutait pas que nos calvaires allaient prendre fin.

Bref, il faut voir l'implémentation de ce design de formulaire comme un simple exercice, au même titre que je fais mes kata le matin avec mon kawa. Cette “futilité” doit vous rester en mémoire d'autant plus que depuis la première apparition de cette animation, il existe des bibliothèques javascript (!) qui feront ce boulot. Et qui feront dégainer Dirty Hacky, mais si vous pensez courir plus vite qu'un parseur .357 Magnum, vous pouvez tenter.

Premiers commits dans la Joie !

Toute animation sera en transitions CSS. Sur les plus petits éléments possibles avec le moins possible de repaint/reflow dans le viewport du navigateur afin de garder une belle fluidité d'animation. Parce que là aussi, l'optimisation et la beauté doit passer par l'optimisation des ressources clients.

Dans le mockup, les labels passent en bleu quand le champ a le focus. Une seule solution pour l'implémenter en CSS pur : dans le source html, renverser l'ordre les éléments <label></> et <input />.

Première mauvaise surprise : je ne connais aucun sélecteur css pour cibler un élement <input /> ou <textarea></> tant que son contenu est vide. La pseudo-classe :empty s'applique à la propriété DOM (el).innerHtml d'un élément, pas à sa valeur. Cibler en css l'attribut/valeur [value=""] ne sert à rien. J'ai dû le faire en JS. Bien évidemment, c'est juste une modification de classe, pilotant l'effet graphique en transitions css.

J'ai un autre souci : la pseudo-classe :invalid s'applique dès le chargement de page, hors je veux changer l'aspect que quand le champ a été changé.
Les pseudo-propriétés propriétaires :-moz-ui-invalid et :-moz-submit-invalid seraient parfaites, mais je veux que ça marche sur tous les navigateurs modernes d'un coup sans me prendre la tête et y revenir dessus dans 3 mois. N'oubliez jamais : les préfixes proprios, c'est pas pour mettre en production !

Donc, il me faut écrire un autre polyfill javascript qui mettra au formulaire la class modified. Ça tient en une dizaine de lignes, mais c'est frustrant.

var tagIfEmpty = '.field';
var markedNotEmpty = 'notEmpty';
var tagIfModified = 'form';
var markedModified = 'modified';

$(tagIfModified).on('change input',tagIfEmpty+' :input',function () {
	var $p = $(this).closest(tagIfEmpty);
	if (this.value!=='') {
		$p.addClass(markedNotEmpty);
	} else {
		$p.removeClass(markedNotEmpty);
	}
	$p.closest(tagIfModified).addClass(markedModified);
});

Oui, le code est ignoble. Et comble de l'insulte, comme j'utilise jQuery depuis un bail sur mon blog, je l'ai pas fait en javascript natif. Honte à Sapajou Hilare.

Bonus d'interface

Il m'a semblé cohérent de n'afficher le bouton d'envoi qu'une fois que le formulaire soit valide, donc quand les champs obligatoires soient remplis et les informations au bon format. Ce qui veut dire que si le site web n'est pas vide, mais que l'url n'est pas valide, le formulaire ne peut être soumis.

Il me manquait aussi un aspect visuel pour indiquer les champs invalides. Plutôt que mettre les champs en rouge, ce qui est trop agressif et impérieux, j'ai tenté avec un léger dégradé sur les champs invalides. C'est peut-être pas le meilleur choix puisque cela casse l'impression d'espace qu'amène les floating labels.

Un message d'information apparaît quand le focus est donné sur au <textarea></>. Ceux qui commentent régulièrement des blogs ont l'habitude d'avoir soit du BBCode, du Wiki, du MarkUp ou un jeu très restreint de balises HTML. J'estime que c'est inutile (j'en parlerais bientôt) et qu'écrire une adresse web a forcément comme intention de mettre un lien. C'était le comportement par défaut de Dotclear, que j'ai gardé.

Et enfin, quand le bouton de validation apparaît, un texte complémentaire indique si la publication est immédiate ou sujette à validation à priori.

Et voilà !

Vous pouvez tentez la maquette hébergée sur GitHub ou naviguer dans le commit de la version exposée pour ce billet, car je vous parie que l'an prochain, j'aurais complètement refait le vrai formulaire en bas. Ou voir la capture et le code dessous :

Le débat reste ouvert

Brad Frost a sorti un excellent article critique : Il parle de soucis sur la sémantique, que j'ai tenté d'éviter autant que possible, mais surtout de problèmes d'utilisabilité. Tellement bien raisonné et empli de bon sens que j'avais des doutes à continuer. Notamment, elle oblige au placeholder de porter le même texte que le label, une redondance inutile. Seule la mise en production permet de trancher.

CSS Tricks propose une idée alternative qui enlève la redondance du texte de label, mais la version des labels flottants à droite réduit l'espace utile du champ d'entrée.

Mais surtout, j'ai besoin de votre avis. Vous, mes fidèles lecteurs, laissez un commentaire et dites-moi si vous préférez l'ancien au nouveau formulaire.