ホームページを作る人のネタ帳

今日から現場で使えるjQueryのフォーム関連プラグイン15選

jQueryの使えるフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。
これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。
今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。
ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。

機能性重視プラグイン


In-Field Labels jQuery Plugin
うっすらと消えていく文字
フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。
なかなかいい感じ。



Create a Progress Bar With Javascript | Nettuts+
チャートバー
demo
シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが%で確認できる。



overset - jVal - jQuery Form Field Validation Plugin
フォームチェッカー
フォームチェッカー。エラーのところがにょきっとカラーパレットが背景として現われて、何処が悪いのかが人目でわかるようになる。



bassistance.de » jQuery plugin: Password Validation
簡易パスワードチェッカー
DEMO
非常に簡易的なパスワードの強度チェッカー。
ないよりあったほうが良いかなぁ位の強度ですが参考までに。



DatePicker - jQuery plugin
カレンダーフォーム
カレンダーUI。
いろんなサンプルがあり、にょきっと出てくるタイプのものはいろんなところで使えそう。



jQuery UI - Datepicker Demos & Documentation
カレンダーフォーム
上で紹介したカレンダーよりも機能は少ないが、最終結果はテキストボックスの中に現われるため、データの受け渡しも楽。お手軽に、と言う人にお勧め。



JQuery File Upload Plugin Script - Demo - Uploadify
アップローダー
jQuery、PHP、flashによるファイルアップローダ。
プログレスバーがついていて、非常にクールなアップローダーを手軽に設置出来る。



jquery-asmselect - Project Hosting on Google Code
ドラッグアンドドロップフォーム
DEMO1
DEMO2
ドラッグ&ドロップしながら使えるフォーム。
ユーザビリティを考慮した使い方をすれば、かなりお勧めの一品ではないだろうか。



フォームデザイン


jQuery UI: Radiobutton- und Checkbox-Replacement
フォームデザイン
フォームの機能ではなく、デザインを変えるjQuery。



"jQuery checkbox v.1.3.0 Beta 1" demo
スイッチデザイン
もはやjQueryフォームの紹介にはかなり高確率で出現するjQueryプラグイン。味気ないチェックボックスが、ON、OFFのスイッチに変わる。



Improved Current Field Highlighting in Forms | CSS-Tricks
選択フィールド強調ツール
DEMO
選択したフィールドを目立つようにするjQuery。



A Fancy AJAX Contact Form – Tutorialzine
フィールドのデザイン
DEMO
フォームをシンプルスタイリッシュに変更。その上でAjaxとPHPによるフォームチェックを行う仕組み。
jQueryプラグインではあるけど、PHP使わなければならないのが難点。



仕掛け


Contactable - A jQuery Plugin | the odin
お問い合わせボックス
DEMO
お問い合わせボックスが左からにょきっと現われる。



Perfect Dropdown Login Box like Twitter using jQuery | AEXT.NET MAGAZINE
Twitterのようなログインフォーム
DEMO
サンプルでわかる通り、まるでTwitterのようなログインフォームを実装できます。



Build An Incredible Login Form With jQuery | Nettuts+
フォーム
DEMO
こちらも+ボタンを押すとにょきっとフォームが出現する。



このエントリーは以下の記事から、なるべく私が使えそうだなと思ったものをチョイスしたものです。
説明は英語ですが、様々なフォーム関連プラグインがまとめられていますので、こちらもあわせてどうぞ。
55 jQuery Form Plugins To Download And Use

それでは、また。
yamada
Posted byyamada

Comments 2

There are no comments yet.

さあ  

参考になります。
便利そうなので、いろいろ試してみます

2010/07/11 (Sun) 22:42

あれはんどろ  

えーっと申し上げにくいんですが

貴殿のブログに掲載しているスポンサー表示の調子が悪いような気がしますが、僕のコンピュータだけの話でしょうか?

記事は読めるので問題ないんですけど、なんだか気になってしまったのでコメントしました。

2010/07/11 (Sun) 22:57

Leave a reply