Html PlaceHolder Attribute done right

While a pet peeve is described as a “minor annoyance”, this issue has always been a little more than that for me. I don’t know how many times I see a textbox on a form somewhere and when I click in the textbox, the label disappears. I get distracted for a moment, and when I look back at the screen, I can’t remember what I was expected to be entering. It happens a lot with Logins. Once I start to log in, I wonder, did they want a username or an email?

So, when I was signing up with Grammarly (I know, from my posts, you wouldn’t guess I would need their service 🙂 ), I was pleased to find out they are doing inputs “right”.

When I clicked into the input, the caption animated down to a smaller version so I could still see which input field I was in.

It is odd to create a blog post for such a minor thing, but I was just so happy to see somebody doing it right that I had to post it somewhere.

160528_PlaceholderMinimized

Print Friendly