3 ms·

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

23 points by tlongren 13y ago

gcb0 13y 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 13y ago
  Have you ever developed mobile UI? Sometimes there just isn't enough pixels.
  - gcb0 13y 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 13y 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-angularjs.html http://maurizionapoleoni.de/blog/Float-label-pattern-with-an...
bbx 13y 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 13y ago
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 13y 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.

23 points by tlongren 13y ago

gcb0 13y 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 13y ago
Have you ever developed mobile UI? Sometimes there just isn't enough pixels.
- gcb0 13y 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 13y 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-angularjs.html http://maurizionapoleoni.de/blog/Float-label-pattern-with-an...

bbx 13y 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 13y ago

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