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.