JavaScript

フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLabels.js」

フォームを入力する際にあると便利なのがplaceholderです。しかし、いざ入力しようとすると何の項目だったか忘れてしまうことがありませんか?そんな時に役立つのがFlowupLabels.jsというjQueryプラグイン。これを使えばplaceholderの利便性を高めることができるので、ユーザーにも優しいフォームを作成することができます。

[ads_center]

FlowupLabels.js

FlowupLabels.jsの実際のデモは以下になります。

FlowupLabels.js

デモ

各項目にカーソルを合わせるとplaceholderが上へ移動するのが特徴です。移動と同時にplaceholder自身のフォントサイズが小さくなるので、入力の妨げにもならないのがいいですね。

入力中は常にplaceholderが表示されているので「今何の項目を入力してるんだっけ?」という状況に陥ることはありません。

一見地味な機能かもしれませんが、ユーザーにとってはかなり利便性が上がるんじゃないかなーと思います。

FlowupLabels.js

関連記事

  1. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  2. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  4. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

  5. Animate Transition
  6. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP