Petite question accessibilité les amis. Mains sur les buzzers !
Selon-vous, il vaut mieux pré-remplir les champs textes ? Et de quelle manière ?
Sans rien de particulier (mais un intitulé adapté)
HTML
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" />
</p>
Avec une aide à la saisie
HTML
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" value="Votre courriel" />
</p>
Avec un véritable exemple
HTML
<p>
<label for="courriel">Courriel</label>
<input type="text" id="courriel" name="courriel" value="courriel@exemple.com" />
</p>
Avec une sur-couche JS et l’utilisation du title
(ici en jQuery)
HTML
<p>
<label for="courriel">Courriel</label>
<input class="exemple" type="text" id="courriel" name="courriel" title="courriel@exemple.com" />
</p>
JS
$("input.exemple").each(function(){
$(this).addClass("ex").val($(this).attr("title"));
$(this).focus(function(){
if($(this).val()==$(this).attr("title"))
$(this).removeClass("ex").val("");
});
$(this).blur(function(){
if($(this).val()=="")
$(this).addClass("ex").val($(this).attr("title"));
});
});
CSS
.ex
{
color:#DDD;
background-color:inherit;
}
J’utilise actuellement la dernière technique, qui me semble se dégrader proprement sans le support JS.