TOP  >  plugin  >  フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」
2018年02月09日

フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」

webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。

floating5
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.

プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。

詳しくは以下

floating4
Floatlabel Demo

floating1
jQuery Floating label for HTML forms

floating3
bootstrap-float-label

フォームエリアのプレースホルダにはタイトルが予め入った状態になっており、該当する文字を入力した瞬間にタイトルが小さな文字となって上部に表示されます。タイトルへの切り替わりにもさまざまな動きがあるようで、注目させたい、今っぽさを出したい時、動きではなくシンプルさにこだわりたい時など、理想に合わせて選択すれば、より使いやすく心地良いフォームを作り出すことができそうです。

今まで何気なくフォームを、既存のフォーマットで作成していた方は、ぜひ一度取り入れてみてはいかがでしょうか。

9 Floating Form Label jQuery & JavaScript Plugins

posted 02:45  |  
Category: plugin   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る