[GIF] Float Label Form Interaction

Read the origin story here.

I've been experimenting a lot lately with mobile forms. Left aligned, top aligned, placeholder text only, etc. for client projects and personal projects.

Placeholder text works great for a simple username and password form, but not so much when there is more information. It's easy to forget which field is which once you've typed into all of the inputs.

If you opt for left aligned fields always exposed you end up with much less space. And space on mobile is precious. If top aligned fields are always exposed, it makes the vertical height grow very quickly.

This idea combines the best of both worlds with placeholder text and top aligned text. Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won't forget what an individual field represents.

Tweet examples to @floatlabel.

-----------------------
Update 1

@jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField

-----------------------
Update 2
I wrote a blog post "How the Float Label Pattern Started" https://mds.io/S9Ob

-----------------------
Update 3
Google released their "Material" design guidelines on June 25, 2014, which contains "floating labels." Pretty cool!