• Steven CavinsSteven Cavins, 3 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
  • Matthijs KolkmanMatthijs Kolkman, 3 months ago

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

    0 points
  • Jim SilvermanJim Silverman, 3 months ago

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

    0 points
  • Tommy Hodgins, 3 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.

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

    There's one quick solution!

    0 points
    • Jonas GothJonas Goth, 3 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
  • Colm TuiteColm Tuite, 3 months ago

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

    0 points
  • Tarek Besbes, 3 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/

    0 points