jQueryでもっとフォームを使い易くするプラグインのまとめ

Webサイトでフォームは大事ですよね。
使いにくかったり、分かりにくかったり、入力多ってなったり
したら離脱しますよね。
そこで使い易いフォームに改善できるjQueryのプラグインをまとめました。


フォームに先に何を入力するかを入れておいてフォーカスされたら
消すとか必要な時だけにヘルプを表示させるなどフォームをもっと
分かりやすくするライブラりが紹介されてます。
あなたのWebを入力しやすくするjQueryプラグイン10選
チェックボックスやラジオボタンを見映え良く
【1】「Checkbox」

ドロップダウンの領域を節約し見映え良く
【2】「combobox」

テキストボックスを使いやすく
【3】テキストボックスにヘルプを一括表示「Form Tips」
【4】テキストボックスにヘルプ情報を個別表示「Watermark Input」

パスワードを入力しやすく
【5】パスワードの入力を補助する「PassRoids」
【6】iPhoneのようにパスワードの入力文字を1字だけ残す「dPassword」

テキストエリアを使いやすく
【7】テキストエリアをリサイズする「autoResize」
【8】テキストエリアに入力するデータを制約する「maxlength」

フォームを使いやすく
【9】フォームにヘルプ情報を表示する「Advisor」
【10】フォームに入力したデータを検証する「Validation」


どれもいいですね。
個人的に直ぐに使いそうなものをメモひらめき電球

【3】テキストボックスにヘルプを一括表示「Form Tips」
ライブラリダウンドーロ先：jQuery Form Tips

【4】テキストボックスにヘルプ情報を個別表示「Watermark Input」
ライブラリダウンドーロ先：Watermark Input

【6】iPhoneのようにパスワードの入力文字を1字だけ残す「dPassword」
ライブラリダウンドーロ先：dPassword

使わせていただきますビックリマーク



さらにフォームを使い易くするために！！！

郵便番号から自動で住所入力できるjQueryのプラグイン
Ajax郵便番号→住所自動入力フォーム（CGI不要版）

プルダウンで都道府県を選択を分かりやすく、かっこいいデザインにするライブラリ
デモはこちら
プルダウンで都道府県などを入力(選択)するイライラを解消するPrefSupport.js

単体でも十分いいんだけど、これ組み合わせたらいいんじゃない！？
って思いますよね。


なんとこの両方を組み合せたモノがあります！
デモはこちら
jQselectable(jQuery.selectable.js)とAjaxZip2を併用する



ここまで改善するとフォームのデザインも変えたくなりますね。
そこで、フォームのチェックボックスやラジオボタン、
セレクトボックスのデザインを変更してユーザビリティを向上したい場合は、
フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい
でたくさん紹介されてます。
その中でも個人的に使いそうなプラグインをメモ！

Twitterのサインインボックスのようなドロップダウンボックスを再現してくれています。
Perfect signin dropdown box likes Twitter with jQuery

Submitボタンをロールオーバーにできます。
Simple Image Submit Button Rollovers with jQuery


ほんとありがたいです。感謝です。
自分もjQueryのプラグインを作れるように頑張らないと！