Create Floating Form Labels with FloatLabel.js or JVFloat.js | Hacker News Reader

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

longren.org

23 pointstlongren7 comments

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!

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

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.

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.

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.

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.

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

Reply on news.ycombinator.com