Create Floating Form Labels with FloatLabel.js or JVFloat.js

http://www.longren.org/create-floating-form-labels-with-floatlabel-js-or-jvfloat-js/

by tlongren • 13 years ago

23 7 13 years ago

gcb02• 13 years ago

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• 13 years ago

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

gcb02• 13 years ago

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.

mimo84• 13 years ago

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...

bbx• 13 years ago

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• 13 years ago

There's also 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 Despite that fact, I still think this is an elegant solution to mobile form design.

tlongren• 13 years ago

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.

Create Floating Form Labels with FloatLabel.js or JVFloat.js

Related Stories