Webフォームに使ってみたい！ HTML5のplaceholder（テキストボックスに予めテキストが表示されている状態）は入力例を指し示したりラベル代わりに使うのが便利です。しかし入力し始めた瞬間に何を入力すべきか忘れてしまったりするとラベルがなくなっていて不便な思いをすることがあります。 そこで使ってみたいのがFlowupLabels.jsです。placeholderと組み合わせて使うことでユーザビリティの高いフォームを実現します。 まず通常の表示が以下になります。 入力前。 Nameにフォーカスを移動します。 placeholderが上に移動！ さらにEmailに移動。 フォーカスが移動する度にplaceholderがアニメーションします。 入力するとplaceholderが上に小さく出たままになります。 入力例。 使い方は簡単で、フォームを指定してFlowupLabelsを実行します。例えば以下のような感じです。

$('.FlowupLabels').FlowupLabels({
  // Handles the possibility of having input boxes prefilled on page load
  feature_onInitLoad: false, 
  // Class when focusing an input
  class_focused:      'focused',
  // Class when an input has text entered
  class_populated:    'populated' 
});

そうするとフォーカスが当たったテキストフィールドのplaceholderがアニメーションしながら上に移動します。これならばユーザビリティの高いフォームが実現できそうですね。 FlowupLabels.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Demo - flowupLabels.js ENFOS/FlowupLabels.js