HTML Zen Garden – The beauty in HTML code

Je déterre ce vieux billet sur les champs textes car il était plein de bonnes idées dans les commentaires.

Tac, tac, tac ! Reprenons svp !

Je laisse de côté le placeholder qui pour l’instant n’est pas envisageable (mais qui à terme viendra remplacer tout ça).

Yves poussait une idée intéressante avec le kbd. Ça pourrait donner ça :

<p>
   <label for="courriel">Courriel</label>
   <input type="text" id="courriel" name="courriel" value="" class="exemple" />
   <kbd>courriel@exemple.com</kbd>
</p>

Reste à savoir si c’est une bonne interprétation de la spécification :

KBD

Indicates text to be entered by the user.

Je met de côté samp qui semble plus indiqué pour des résultats.

Couplé à un petit JS ça pourrait le faire non ?

JS

jQuery(champs).each(function(){
    var exemple = 'ex';
    var that = jQuery(this);
    var papa = 'p';
    var fiston = 'kbd';
    var key = that.parent(papa).children(fiston);
    key.hide();
    that.addClass(exemple).val(key.text());
    that.focus(function(){
       if(that.val()==key.text())
          that.removeClass(exemple).val('');
    });
    that.blur(function(){
       if(that.val()=='')
          that.addClass(exemple).val(key.text());
    });
});
champs('input.exemple');

CSS

.ex
{
    color:#DDD;
    background-color:inherit;
}

Ou encore mieux si on a la place :

• ne pas ajouter de script ;
• laisser l’exemple à côté ;
• et se servir de value="" pour les cas d’erreur (à corriger sans tout avoir à re-saisir).

Ainsi :

HTML

<p>
   <label for="courriel">Courriel</label>
   <input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
   <kbd>courriel@exemple.com</kbd>
</p>

CSS

.erreur
{
    font-weight:bold;
    color:#F00;
    background-color:inherit;
}

Reste une question : faut-il placer le kbd avant le champs pour des soucis d’accessibilité ?

HTML

<p>
   <label for="courriel">Courriel</label>
   (<kbd>courriel@exemple.com</kbd>)
   <input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
</p>

ou

<p>
   <label for="courriel">Courriel (<kbd>courriel@exemple.com</kbd>)</label>
   <input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
</p>

Ou encore lui placer également un label ?

HTML

<p>
   <label for="courriel">Courriel</label>
   <input type="text" id="courriel" name="courriel" value="vincentàhtmlzengarden.com" class="erreur" />
   <label for="courriel"><kbd>courriel@exemple.com</kbd></label>
</p>

À vos claviers !

PS : l’exemple est ligne est ici.