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 ?
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 ?
Je dépose juste quelque chose comme github.com/serby/jquery.placeholder.js/blob/master/ pour ces navigateurs.
Le texte de remplacement n'est pas un substitut accessible de l'élément label : w3.org/html/wg/drafts/html/master/
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">
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">
À 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.
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.
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.
Merci ! Je cherche une solution pour répondre à une exigence d'accessibilité. L'utilisation des attributs value et placeholder n'était apparemment pas suffisante. -_-
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 :
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.
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 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.
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 .