8 comments

  • Colm TuiteColm Tuite, 6 months 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, 6 months 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, 6 months 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, 6 months ago

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

    3 points
  • Tarek Besbes, 6 months 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
  • Matthijs KolkmanMatthijs Kolkman, 6 months ago

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

    0 points
  • Steven CavinsSteven Cavins, 6 months ago

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

    0 points