Pré-remplir les champs textes (suite)

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.


7 commentaires ↓

#1 Yves Van Goethem le 10.21.09 à 13:54

La spécification de HTML 5 décrit d’avantage le rôle de kbd (et samp) : http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element

Ils démontrent même l’utilisation imbriquée de ces derniers 😉

#2 Stéphane Deschamps le 10.21.09 à 14:32

Tu nous mets un exemple en ligne ? (j’ai la flemme de le tester en local)

#3 Stéphane Deschamps le 10.21.09 à 14:51

Attention pas de double label, no-go en accessibilité

Si tu veux t’amuser, tu peux jeter un oeil à ARIA aussi : l’équivalent du label c’est aria-labelledby, et une description supplémentaire s’obtient avec aria-describedby.

Installe NVDA et teste sur Firefox 3.5 l’exemple de Marco Zehe pour le voir en action.

#4 Vincent le 10.21.09 à 15:26

Stéphane : ok, noté (j’apprends des trucs) ! Ça pose quoi comme souci précisément ?

NVDA est installé, mais tout comme avec Jaws je galère toujours pour l’utiliser convenablement. Sans compter les bons maux de tête à chaque l’utilisation.

Enfin, il faudra que je me force : tu as raison.

PS : l’exemple en ligne est ici.

#5 Vincent le 10.21.09 à 15:44

Yves, si je suis bien :

  • ça valide l’utilisation de kbd pour ce genre d’utilisation.

Et par ailleurs :

  • <samp><kbd>toto</kbd></samp> s’utilise pour reprendre des données saisies par l’utilisateur (ex : « vous recherchez le terme toto ») ;
  • <kbd><samp>Fichier</samp></kbd> s’utilise pour reprendre des données fournies par le système (ex : « cliquez sur Fichier puis Imprimer ») ;
  • <kbd><kbd>Ctrl</kbd> + <kbd>P</kbd></kbd> s’utilise pour les combinaisons (ex : « appuyez sur Ctrl + P »).

On rigole bien quand même, hein les copains ?

#6 Stéphane Deschamps (notabene) 's status on Monday, 26-Oct-09 17:28:23 UTC - Identi.ca le 10.26.09 à 18:28

[…] "On rigole bien quand même, hein les copains ?" © Vincent http://www.htmlzengarden.com/2009/10/pre-remplir_les_champs_textes_suite/ […]

#7 Stéphane Deschamps le 10.26.09 à 18:33

Pour tenter de répondre dans l’ordre :

Si tu mets deux labels, je n’en lis qu’un. Je ne sais pas forcément lequel sera lu, mais là n’est pas la question. Ton but ici est de donner deux informations, et le label ne le permet pas.

En revanche ton exemple 2 avec de l’ARIA pourra donner :

<p>
    <label for="courriel2" id="labelforcourriel2">Courriel</label>
    <input type="text" id="courriel2" name="courriel2" value="vincent&agrave;htmlzengarden.com" class="erreur" aria-labelledby="labelforcourriel2" aria-describedby="descrforcourriel2" />
    <samp id="descrforcourriel2">de la forme <kbd>courriel@exemple.com</kbd></samp>
</p>


Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !