46 votes

Comment créer une étiquette à l'intérieur d'un élément <input> ?

Je voudrais insérer un texte descriptif dans un élément de saisie qui disparaît lorsque l'utilisateur clique dessus.

Je sais que c'est un truc très courant, mais je ne sais pas comment faire

Quelle est la solution la plus simple/la meilleure ?

4 votes

Pour mémoire, le attardi.org/labels La solution proposée par Tex est en fait meilleure que celle de Cory Walker.

2 votes

Horrible UX, prouvé maintes et maintes fois.

0 votes

L'image n'a pas fonctionné. Je l'ai supprimée du message. Toujours disponible en révision 3 .

132voto

Rich Bradshaw Points 33598

Si vous utilisez HTML5, vous pouvez utiliser la fonction placeholder attribut.

<input type="text" name="user" placeholder="Username">

2 votes

En outre, selon ce site IE ne le supporte pas, même jusqu'à IE9.

1 votes

Je dépose juste quelque chose comme github.com/serby/jquery.placeholder.js/blob/master/ pour ces navigateurs.

13 votes

Le texte de remplacement n'est pas un substitut accessible de l'élément label : w3.org/html/wg/drafts/html/master/

47voto

Cory Walker Points 1797
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Un meilleur exemple serait le bouton de recherche SO ! C'est de là que je tire ce code. L'affichage de la source de la page est un outil précieux.

24 votes

Légère extension de votre solution : <input name="q" class="textbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

23 votes

Vous pouvez utiliser la propriété defaultValue, vous devrez donc écrire le texte de l'étiquette une seule fois (dans l'attribut value), et non trois fois, dans le code : <input type="text" value="Search" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">

40voto

Tex Points 877

À mon avis, la meilleure solution consiste à ne pas utiliser d'images ou à utiliser la valeur par défaut de l'entrée. Elle ressemble plutôt à la solution de David Dorward.

Il est facile à mettre en œuvre et se dégrade agréablement pour les lecteurs d'écran et les utilisateurs sans javascript.

Jetez un coup d'œil aux deux exemples ici : http://attardi.org/labels/

J'utilise généralement la deuxième méthode (labels2) sur mes formulaires.

1 votes

La solution avec les étiquettes derrière une entrée transparente est en fait l'implémentation la plus propre que j'ai jamais vue.

0 votes

Très bonne solution - plus de contrôle sur l'aspect et la convivialité, pas de souci d'interférence avec la validation/le formulaire.

0 votes

Merci ! Je cherche une solution pour répondre à une exigence d'accessibilité. L'utilisation des attributs value et placeholder n'était apparemment pas suffisante. -_-

5voto

Quentin Points 325526

L'approche la plus courante consiste à utiliser la valeur par défaut comme étiquette, puis à la supprimer lorsque le champ reçoit le focus.

Je n'aime vraiment pas cette approche, car elle a des répercussions sur l'accessibilité et la convivialité.

Je commencerais plutôt par utiliser un élément standard à côté du champ.

Ensuite, si JavaScript est actif, il définit une classe sur un élément ancêtre, ce qui entraîne l'application de nouveaux styles :

  • Positionner relativement une div qui contient l'entrée et l'étiquette
  • Positionnement absolu de l'étiquette
  • Positionner absolument l'entrée au dessus de l'étiquette
  • Supprimez les bordures de l'entrée et définissez sa couleur d'arrière-plan à transparent.

Ensuite, et également chaque fois que l'entrée perd le focus, je teste pour voir si l'entrée a une valeur. Si c'est le cas, je m'assure qu'un élément ancêtre possède une classe (par exemple "hide-label"), sinon je m'assure qu'il ne possède pas cette classe.

Chaque fois que l'entrée obtient le focus, définissez cette classe.

La feuille de style utilise ce nom de classe dans un sélecteur pour masquer l'étiquette (en utilisant text-indent : -9999px ; généralement).

Cette approche permet d'offrir une expérience décente à tous les utilisateurs, y compris ceux qui sont handicapés par le JS et ceux qui utilisent des lecteurs d'écran.

3voto

Maciek Points 21

J'ai rassemblé les solutions proposées par @Cory Walker avec les extensions de @Rafael et celle de @Tex qui était un peu compliquée pour moi et j'ai trouvé une solution qui, je l'espère, est la suivante

sans erreur avec javascript et CSS désactivés.

Il manipule la couleur de fond du champ du formulaire pour afficher/masquer l'étiquette.

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

Regardez le script en action : http://mattr.co.uk/work/form_label.html

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X