デザイナー必見！ウェブフォームにフローティングラベルアニメーションを簡単に組み込めるプラグイン9選【JavaScript・jQuery】

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、9 Floating Form Label jQuery & JavaScript Pluginsを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

4,453 views

読了時間 : 約4分16秒

ウェブフォームには、非常に素晴らしい機能を追加することが可能です。カスタムアイコンから検証機能まで、少ないプラグインの追加でできるようになります。

その中でも、最新機能の1つは、フローティングラベルアニメーションでしょう。これは、ユーザーが入力フィールド内をクリックし、プレースホルダー（ラベル、またはその両方）がテキストフィールドに浮かびあがります。ユーザーはラベルが邪魔にならずにテキストを入力できます。

これをフォームに追加したい方のために、フリー、オープンソース、そしてウェブデザイナー向けに作られた最高のフローティングラベルプラグインの９つをご紹介します。

１.　floatingLabel.js：設定が簡単で軽量

最初はfloatingLabel.jsというクラシックなJSプラグインです。これは、サイズが約1KBで、非常に小さく作られています。

デフォルトではプレースホルダテキストで機能する小さなプラグインです。そのため、ユーザーがテキストを入力すると、プレースホルダーは自動的にフィールドの上のフローティングラベルに変換されます。

言うまでもないかもしれませんが、テキスト入力、テキストエリアが添付できます。プラグインは1回の関数呼び出しで実行されるため、設定は非常に簡単で、デフォルトのスタイルの見た目はとても良いです。

２.　jQuery Floating Labels：設定できる項目が多い

これは、ご紹介した別のプラグインとは少し異なるバージョンですが、見た目は非常に似ています。 jQuery Floating Labelsは、jQueryを利用して同じ機能を提供し、jQuery開発者との協力をしています。

しかし、少し大きいので注意が必要です。JS/ CSSファイルになるとサイズはさらに少し大きいです。言うまでもありませんが、これにはjQueryライブラリが必要です。しかし、多くのカスタムオプションで設定することが可能です。

デモページをご覧ください。試してみたい方は、GitHubからコピーを入手できます。

３.　Floatlabel：単純かつ見た目すっきり

Robert Douglas氏によるFloatlabelのスクリプトは非常に単純です。これはjQueryでも動作しますが、派手なアニメーションや見栄えのする効果があるものではなく、プレースホルダーテキストと入力ラベルの間のシフトを処理するための基本的なフォーム入力プラグインです。非常に単純なプラグインですが、すっきりとした解決策を望むならば、これは最適です。

デモもかなり基本的です。しかし、道に迷ったと感じた場合は、メインのGitHubリポジトリにあるドキュメントと詳細をご覧ください。