

Create Floating Form Labels with FloatLabel.js or JVFloat.js - tlongren
http://www.longren.org/create-floating-form-labels-with-floatlabel-js-or-jvfloat-js/

======
gcb0
just leave the damn labels there in the first place!

placeholder text is not to be used as field label. that is bad practice and
only ever useful for a small "search" bar, when there is a clear "search"
button next to it!

~~~
joseph_cooney
Have you ever developed mobile UI? Sometimes there just isn't enough pixels.

~~~
gcb0
There is alwaysenough pixels.

I heard that argument before for dozen of platforms.

Your shiny app does not have new problems. And it won't flop if you use
scrolling. It will flop if don't know what to type where.

------
bbx
The concept is nice, and works well on mobile interfaces where placeholders
are often used in replacement of standard labels. You end up providing the
user with additional information, considering each field still provides a
label even when filled.

For desktop interfaces, I like using a combination of standard (btw clickable)
form labels, and HTML 5 placeholders. The label's text is very standard:
"Name", "Email", "Password"... The placeholder's text is then used as a helper
which holds useful but not vital information. For "Name" you can display "Ex:
John Smith", for "Email" something like "john@example.com", and for "Password"
just a bunch of dots.

------
TheSisb2
There's also
[https://github.com/ENFOS/FlowupLabels.js](https://github.com/ENFOS/FlowupLabels.js).

The one unsurmountable problem with this design pattern is form filling after
page load (lastPass for example). As discussed in this issue:
[https://github.com/ENFOS/FlowupLabels.js/issues/2](https://github.com/ENFOS/FlowupLabels.js/issues/2)
Despite that fact, I still think this is an elegant solution to mobile form
design.

~~~
tlongren
Cool, I hadn't seen that one yet! It's seems to be very small in terms of file
size. I'll have to check it out more later. Thanks for the link.

------
mimo84
I really like the idea of floating labels. I did the same but almost without
JS using AngularJS directives: [http://maurizionapoleoni.de/blog/Float-label-
pattern-with-an...](http://maurizionapoleoni.de/blog/Float-label-pattern-with-
angularjs.html)

