今日から現場で使えるjQueryのフォーム関連プラグイン15選
2010年07月01日 公開
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
DEMO
サンプルでわかる通り、まるでTwitterのようなログインフォームを実装できます。
Build An Incredible Login Form With jQuery | Nettuts+
DEMO
こちらも＋ボタンを押すとにょきっとフォームが出現する。
このエントリーは以下の記事から、なるべく私が使えそうだなと思ったものをチョイスしたものです。
説明は英語ですが、様々なフォーム関連プラグインがまとめられていますので、こちらもあわせてどうぞ。
55 jQuery Form Plugins To Download And Use
それでは、また。