JVFloat.jsはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

HTML5で実装されているplaceholder要素はあらかじめどういったデータを入力すれば良いか分かるのでユーザビリティが高くなります。しかしより優れたユーザビリティを目指すならJVFloat.jsを使ってみても良さそうです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-19 9.52.30.1382166617.png)
デモ。最初にtestとplaceholderが入っています。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-19 9.52.39.1382166622.png)
入力を開始するとplaceholderが上に移動しました。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-19 9.52.47.1382166626.png)
メールアドレス入力でも同じようになります。

JVFloat.jsが行っているのはplaceholderに入っている文字列をそのままラベルにしてくれるという操作です。アニメーション付きなのでユーザの戸惑いも少ないでしょう。

注意点としてはplaceholderの文字そのままなので、入力例を表示する形では違和感がありそうということです。何を入力すべきかをうっかり忘れてしまう場合の対策に使うと便利でしょう。

必要な時に必要な情報を表示するというのはユーザビリティの基本です。ラベルとplaceholderは内容が似かよるケースが多いので、いっそのこと同じものにしてしまうのは一つの方法です。

maman/JVFloat.js