Shrinking field titles - what is it?

[jackweb]

I am increasingly seeing a new way of handling labels on form fields. It is cool, but I don’t know how to do it. It is this: The field title seems initially to be a placeholder. But on field focus, the title quickly animates to a smaller size font at the top of the field, allowing space for keyboard entry.

What is this, and where can I learn about it?

[ralphm]

It’s called “floating labels”. E.g.

• http://bradfrost.com/blog/post/float-label-pattern/
• https://css-tricks.com/float-labels-css/
• https://codepen.io/collection/IjFib/