What about inside and outside? e.g., http://blog.circleci.com/adaptive-placeholders/
That's pretty cool!
never understood the advantage of doing this. why not just put the label on top and not add visual distractions to the form?
Sometimes you have a lot of forms that need to fit on a page and won't fit with titles, or people just like the cleaner look.
right, but the active state takes up no additional space in this case.
Why marinate a steak? As a bland hunk of meat, it serves the purpose of passing nutrients to your body just fine. But if we add a little marinade and some spice, it becomes something much more enjoyable to the person that will be consuming it, rather than just something they have to eat.
l wouldn't suggest marinading an essential web form.
You seem fun.
"Distraction" is subjective. I enjoy a little emotion or animation sometimes, it's pleasant, doesn't slow me down, and I enjoy seeing it.
I feel like this is important in forms with over 2 fields. However, if the fields are simply username and password, I don't think there is any need for the extra labels.
There are a few other examples of not needing this as well. I enjoy the thought of this article, but I'm not a fan of people saying "always do this".
Precisely what I was thinking when reading the article.
Context, audience and form size help determine the best approach.
Definitely see the point here and the interesting takeaway here is that the label and placeholder are 2 different pieces of content: one describes the field, and the other describes what typical input looks like.
This is more true the more complex the form. Likewise, simple logins or 2-field sign ups can get away with having placeholder only, since they are such common actions.
I find if it's absolutely essential, it's better to add a persistent envelope icon or padlock just as a reminder.
I agree with this 100%.
I made this (http://codepen.io/alec_schmidt/pen/ldpHG) experiment in an attempt to use the icon as the "label" since the user can probably connect the metaphor after they've input something and gone back.
However, it really only works if there are a FEW text fields to remember and the icon metaphor is strong (mine aren't that strong). Admittedly it's mostly visual fluff :3
Check out what @mds did with the Float Label Pattern. A lot of people have picked it up and built a lot of resources based on the pattern. See his post and look at the resources below:
This is a big issue for me as I live in a country that their first language isn't english, so when its comes to filling in forms online that the site is in Dutch it becomes super difficult.
Chrome will translate the full page but doesn't translate placeholders.