Disappearing the input value when typing

That’s a nice demo but the problem with this approach is that once the form is completed and a user wants to revise the form before submitting then they have no idea if the data they have entered is the correct data for the form because there are no labels to tell them what the data should have been (unless they then re-focus on every field). They may have inadvertently entered the wrong data into one of the fields especially if like me they spend more time looking at the keyboard than at the screen.

A better approach is to use actual labels by default and then if js is available slide the labels over the input to appear as placeholders and then when focussed just slide them up and above the input. This make the form appear clean on first look and then as you complete it the labels get fixed in place above each input.

However as already mentioned forms are hard enough on mobiles anyway so having more space and a bigger target area via an ever present label is more desirable.

5 Likes