

Float Label Pattern - ryanjodonnell
http://bradfrostweb.com/blog/post/float-label-pattern/

======
clarkmoody
Even though the space for the small labels is there the whole time, I think
this approach is better than having the small labels visible the entire time.
Consider if the labels were tiny and always visible: the form would contain
very tiny text and odd spaces where the existing placeholder should be.

Gray placeholder text also provides the needed contrast with the black user-
entered text, so as not to confuse the two types of large text.

The animation is very clean as well.

~~~
ams6110
My reaction was the opposite, I thought it would be more effective to just
have the small labels from the start and no animation when you start entering
a value. I'm pretty anti-animation on forms though. Just seems gratuitous.

------
nfoz
Not bad. Certainly better than inline labels. However, I think another con is
the distraction of stuff moving around as soon as I start to type.

Let me be clear, it's not that there's movement. It's that if a box asks me to
enter something, then my answer is premised on what was asked of me. If the
moment I start typing it seems like something in the environment is changing
-- suddenly I'm like, whoa, what changed? Is what I'm typing still what the
box wants? Did I do something that caused state to change simply by typing a
character?

There's this tiiiiny moment of hesitation at that first character, before my
eyes scan what happened, re-read the label text, and I see what occurred and
that my input is still valid.

tl;dr: might take a bit of getting used to seeing stuff change on the screen
the moment you type into a box.

~~~
justinpombrio
This is a good point; I feel the same thing. Do you think it could be solved
by replacing the inline label with a floating label when the user selects the
text box, instead of when they start typing?

~~~
nfoz
I do think that's better. But I'm concerned that if focus changes have a
visible effect, that could also be disconcerting to a user. I think I'd have
to try it out.

~~~
deskamess
Perhaps it could take effect after focus was lost (and something had been
typed in).

------
aaronbrethorst
All that and there's no link to the iOS implementation?
[https://www.cocoacontrols.com/controls/rpfloatingplaceholder...](https://www.cocoacontrols.com/controls/rpfloatingplaceholders)

n.b. I created the site I link to above, etc etc.

------
thetron
I love this idea. I did a quick pure-CSS implementation, not bullet-proof by
any means - biggest downside is it's reliance on the `required` attribute:
[http://jsfiddle.net/thetron/qpsnH/](http://jsfiddle.net/thetron/qpsnH/)

------
spectre
Implementation using CSS3:

[http://jsfiddle.net/spectre/52Bf2/3/embedded/result/](http://jsfiddle.net/spectre/52Bf2/3/embedded/result/)

~~~
bringking
I spiced it up a bit with a little animation. kind of hacky since I position
the element over the input placeholder using absolute positioning.

[http://jsbin.com/OTaYIFE/1/](http://jsbin.com/OTaYIFE/1/)

------
xutopia
My beef with the placeholder pattern was that once you typed a character you
wouldn't know what the field is all about. This pattern fixes this.

~~~
petepete
Surely the placeholder is meant to contain a hint rather than just another
copy of the label text, though?

------
blorenz
I don't feel that this solves anything that a label + placeholder could
accomplish in this demo. The space for the floating label is available the
entire life of the form - before, during and after field focus. I just think
that this solution is just putting lipstick on the pig of the issue via
animations.

~~~
psychometry
Sometimes a little lipstick massively increases form conversions. The more
minimal and inviting the form looks, the less imposing it feels to the user.

------
eagleal
I've made something similar on a data editing UI back in 2011. But I found
that showing the label only on field focus wasn't really suitable for UIs that
contained multiple fields of similar data.

Like in the example below[1] there are two fields where you can enter
coordinates data, but without a hint you wouldn't be able to distinguish where
should one or the other go.

[1] [http://www.pmura.com/media/af-ui-
input-2011.png](http://www.pmura.com/media/af-ui-input-2011.png)

~~~
nfoz
In that screenshot, it would help if the toolkit showed the extent of the
textboxes. Having the bare floating text in a sea of white provides minimal
context.

~~~
eagleal
Actually it does when you focus on an input. Having borders/backgrounds on
every piece of text proved to be a bit messy in my case.

It would've been cooler if I could've capture the interaction, but I don't
have access neither to the live webapp, neither do I have a deployed
development version at hand :(.

------
Sakes
This might be the most beautiful form that I've ever seen. Just gorgeous. I
can't think of any way to improve it, and so have nothing valuable to add as a
comment.

------
ryanthejuggler
Not to be that guy, but could you possibly have picked _any_ color other than
that particular shade of brown for the header?

Other than that, this is a really gorgeous solution. I'm going to see if I can
implement something like this for Android.

------
tzury
Quick example by the author
[http://codepen.io/iamjordanlittle/pen/AHdfn](http://codepen.io/iamjordanlittle/pen/AHdfn)

------
sarreph
This is beautiful. I'm going to keep a tab on this idea for the next time I
need to implement a labeled interface in iOS.

------
joelanman
Its always nice to see new approaches, but I think the smaller label text is
just too small for lots of users.

------
liahsheep
I hated when I have to choose between label and placeholder, and this has the
best of both worlds!

------
yeah_ok
Can someone explain to me the difference between an inline label and
placeholder text?

~~~
vectorjohn
The inline label doesn't disappear when you type something.

------
d0m
A clear cons is the fuckload of problems you get with IE trying to do that..
and people entering their emails where it asks emails and vice-versa. I know
there are fixes.. but still, always a pain to deal with.

