8 comments

  • Colm TuiteColm Tuite, over 6 years ago

    Placeholders have 93% browser support. The other 7% can be accommodated with a single line of JS...what more do you want?!

    9 points
  • Tommy Hodgins, over 6 years ago

    I think the advice is never to have the instruction be present only as the placeholder. Nothing is more annoying than having to empty a field to check what you were supposed to enter into it.

    Why not use a solution that says: display a label and a placeholder, and any time an input isn't empty, display the placeholder text inside the element. Any time a field has text in it, display that placeholder somewhere else visually near the field.

    <label> <input placeholder="Enter your Name"> </label> <style> label:after { display: block; font-family: sans-serif; font-size: 9pt; color: #999; } @element 'input' and (min-characters: 1) { $parent:after { content: 'eval("placeholder")'; } } </style> <script src=http://elementqueries.com/EQCSS.js></script>

    There's one quick solution!

    6 points
    • Jonas GothJonas Goth, over 6 years ago

      Really like this solution as well for it's simplicity. Great example of this for iOS.

      Though i find the major reason to generally avoid putting the placeholder text inside the element as a default, is because users tend to instinctively think a current value is already in place. There are many examples of increased conversion rates, when having the placeholder text fixed above the field at all times instead.

      0 points
  • Jim SilvermanJim Silverman, over 6 years ago

    nielsen norman also did a good writeup of this a few years back. https://www.nngroup.com/articles/form-design-placeholders/

    3 points
  • Tar Bez, over 6 years ago

    I think designers have been quite concerned about the issue which is why nowadays; they're approaching the issue a bit differently. By far I think it is the solution to make it both workable and beautiful through text inputs using CSS transitions, animations and pseudo-elements. https://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

    2 points
  • Duke CavinskiDuke Cavinski, over 6 years ago

    If you have fields aligned in more than one column, this has the potential effect of having some very staggered forms.

    0 points
  • Matthijs KolkmanMatthijs Kolkman, over 6 years ago

    But but... Its ugly :( Icons to the rescue!

    0 points