JavaScript

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

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

[ads_center]

FlowupLabels.js

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

FlowupLabels.js

デモ

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

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

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

FlowupLabels.js

CSS DigCSSをプロパティから解析してくれるChrome拡張機能「CSS Dig」前のページ

SVGパスを使った美しいレスポンシブのプログレスバーを実装できるJSライブラリ「ProgressBar.js」次のページ

関連記事

  1. gridstack.js

    JavaScript

    ウィジェットレイアウトを作成できるjQueryプラグイン「gridstack.js」

    gridstack.jsはドラッグ&ドロップでウィジェットレイアウトを…

  2. jQuery.GI.TheWall.js
  3. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  4. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  5. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  6. Material Design Responsive Table

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP