L’attribut de l’espace réservé

Original: http://www.punkchip.com/2013/08/the-placeholder-attribute/

Pendant des années, les concepteurs ont recouvert des étiquettes sur les champs de saisie afin d’économiser l’écran de l’immobilier. En tant que développeurs front-end nous mettons en œuvre cette aide de positionnement et de gestionnaires d’événements absolus pour déplacer l’étiquette hors de l’écran dès que l’utilisateur a mis l’accent sur ​​le terrain. Concentre l’utilisateur; étiquette disparaît.

L’attribut de l’espace réservé a été introduit en HTML5 et a depuis été usurpée, de manière à reproduire la fonctionnalité décrite ci-dessus. Permettez-moi de ce très clairement avant de passer, l’attribut d’espace réservé n’est pas un remplacement pour une étiquette.


L’espace ne disparaît pas quand il obtient le focus

Les versions actuelles des navigateurs populaires, Chrome 28, Firefox 23 et Safari 6, c’est le comportement. Dans IE9 et 10 l’espace réservé disparaît sur ​​le focus.

Ainsi, en utilisant l’attribut d’espace réservé dans la façon prescrite, comme un indice de la valeur du champ, il affiche le comportement suivant: l’utilisateur se concentre; espace réservé reste; types d’utilisateurs d’un caractère; espace réservé disparaît.

Il a eu beaucoup de débats sur la façon dont l’espace réservé doit se comporter.

La spécification HTML5 habitude d’être ambigu dans la façon dont il devrait être mis en œuvre, d’où la raison pour laquelle les navigateurs avaient comportement différent. Toutefois, récemment, l’expression «et / ou» a été supprimé:

Les agents utilisateurs devraient présenter ce conseil à l’utilisateur, après avoir sauts de ligne séparée de lui, lorsque la valeur de l’élément est la chaîne vide et [l’habitude d’être et / ou] le contrôle ne se concentre pas, c’est à dire, en l’affichant dans un flou blanc contrôler et cacher autrement.


     W3: L’attribut d’espace réservé


Je pense que la façon dont la majorité des navigateurs ont mis en œuvre est bonne. Par exemple, pensez à ce qui suit:

  •      un gain d’entrée se concentrent sur la page de chargement
  •      vous êtes momentanément distrait après focalisation dans un champ


Dans les deux cas, l’aide de la mise en œuvre correcte voudrait dire que l’information est effectivement perdu et ne pouvait être lisible en retirant l’accent sur ​​le terrain. Ce serait un problème particulier à ceux qui ont des difficultés d’apprentissage ou de la mémoire et des déficiences moteur.


Le champ semble remplir

Je suis d’accord que cela pourrait être un problème.

Comme les utilisateurs travaillent dans la plupart des formes:

1. Ils voient une boîte vide.
2 Ils saisissent.
3 La boîte maintenant semble rempli.

Chaque fois que cela se produit, les utilisateurs apprennent que

Boîtes dont ils ont besoin pour remplir sont vides
Boîtes avec du texte en eux sont déjà remplis en


  Questions UX: Ne pas mettre Conseils à l’intérieur des zones de texte dans les formulaires Web


Cela pourrait se faire de deux manières; en changeant sa couleur (voir la section suivante) et copieécriture intelligente.

Au lieu de mettre un exemple de la valeur qui pourrait facilement être interprété comme une valeur réelle:
votre adresse

Considérez montrant explicitement que c’est un exemple et utiliser du texte factice, tels que:
votre adresse


Le texte est trop sombre, pouvons-nous le rendre plus léger?

Non. Mais vous devriez vous assurer que c’est une couleur différente à votre texte d’entrée par défaut.

Habituellement paramètre fictif de texte est rendu comme une couleur gris clair et il ne fournit pas assez de contraste pour être lisible par tous (il ne passe pas le test de contraste de couleur de WCAG).

Vous pouvez changer la couleur en utilisant le code suivant, à partir astuces CSS:

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;
   opacity: 1;
}

:-ms-input-placeholder {  
   color: red;  
}

:: webkitentréeespace réservé {
color: red;
}

Je ne suis pas venu à une conclusion sur ce que la couleur l’espace réservé doit être, il dépend de l’image de marque de votre site, mais certainement ne le rend pas plus léger.


Pour en savoir plus

Comments are closed.