Billets publiés en décembre 2008 ↓

Pré-remplir les champs textes

Le 15 décembre 2008 — Réflexions

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.

15 commentaires

Billets suivants →