サイト作りにはかかせないユーザー窓口である「入力フォーム」に関するjQueryをご紹介。運営側と連絡をとってくれるようなユーザーすべてがそれを使うわけですから、こだわっておきたいポイントです。今回は、どどーんと50個すべて紹介しちゃいますので是非ブックマークして使ってみてください。

おもしろいなーと思ったものに関しては画像つけてます。

フォームに機能を付与する編

Elastic – Make your textareas grow
改行に合わせてテキストエリアがどんどん伸びる

jQuery “Highlight” Plugin
フォーカスされた項目をハイライトする

Autotab: jQuery Auto-Tabbing and Filtering
電話番号に使える次の項目に自動フォーカス

Ajax Fancy Captcha
適切なアイコンをドラッグして認証するスパム対策

jQuery NobleCount
いま何字書いたか表示される

Password Strength Indicator and Generator
パスワードの強さを測る

FormToWizard Plugin
フォームをステップ１、ステップ２みたいに分ける

Sliding Labels – jQuery Form Plugin
フォーカスするとラベルがスライドする

ToggleVal
フォーカスするとラベルが消える

jQuery AlphaNumeric
入力できる文字の種類を制限

セキュリティ編

jCryption
SSLが有効になっていなくても暗号化できる

Password Validation Plugin
パスワードの強度が低かったり間違っていたら知らせます

Password Strength – Estimates brute force time
入力されたパスワードが解析されるのに必要な時間を表示

Password Strength Meter v2
パスワードの強度を表示

入力補助編

Masked Input Plugin
フォームの中に書式を表示

autoNumeric()
数字に1000単位でカンマをつける

アップロードプラグイン編

AJAX Upload
アップローダーをフォームに設置

jqUploader: jQuery Plugin for File Upload and Progressbar
アップローダーをフォームに設置

Uploadify
一気に複数アップロードできる

jQuery Uploadprogress Plugin
アップロード時にプログレスメーターを表示

フォームを視覚的にカスタマイズする編

jQuery Checkbox
ラジオボタンをおしゃれにする

Jqtransform – jQuery form plugin
フォームを簡単におしゃれに

In-Field Labels jQuery Plugin
ラベルがアニメーションしてフェードイン・アウト

Niceforms
フォームを丸角にしたり、ボタンをおしゃれにしたり

jNice
フォームをシンプルで洗練されたデザインに

Uniform – Sexy forms with jQuery
ラジオボタン・チェックボックスなどをおしゃれに

prettyCheckboxes
チェックボックスをおしゃれに

セレクトボックス・コンボボックス編

jquery.combobox
にょきにょきにょきっとセレクトボックスが現れます

JavaScript Image Combobox
項目にアイコンをつける

SelectBox Plug-in
セレクトボックスに関するプラグイン

Two Sided Multi Selector
プールされた項目から選択して追加する

flexselect
テキストエリアを選択すると、候補が現れる

時間や日付を選択する項目をつくる編

jQuery.timepickr.js
時刻を選択できるボタン型のフォーム

DatePicker
カレンダーから日付を選択。複数も可能。

jQuery datePicker
カレンダーアイコンをクリックするとカレンダーが現れる

jQuery Week Calendar
週間の細かい時間割まで指定できる

フォームに候補を表示する編

AutoSuggest
候補を表示してオートコンプリートさせる

Autocomplete
候補を表示してオートコンプリートさせる

Ajax Autocomplete
候補を表示してオートコンプリートさせる

FaceBook Like – jQuery and autosuggest Search Engine
候補を表示してオートコンプリートさせる

フォームの整合性をチェックする編

A jQuery inline form validation, because validation is a mess
エラーがあればツールチップでお知らせ

Validation
入力箇所をハイライトしてエラーをお知らせ

Highly Customizable Yet Simple Form Validation
入力箇所をハイライトしてエラーをお知らせ

LiveValidation – Validation as you type
指定したワードが入力されていなければエラーを表示

Ketchup Plugin
かわいいツールチップでエラーをお知らせ

jTip – The Jquery Tool Tip
フォームの横にヘルプアイコンを設置。オンマウスで開きます。

jQuery Live Form Validation
リアルタイムでエラーをお知らせ

Valid8 – An input field validation plugin
項目が飛ばされると「この項目は必須です」を表示

jVal – jQuery Form Field Validation Plugin
ビックリマークを付けてエラーをお知らせ

　
ユーザーにとってもフォームは苦痛ですし、制作側にとってもフォームってなかなかめんどくさいですよね。jQueryで簡単に、使う側も作る側も楽しめるようなフォーム作りができるなんてほんと素敵です。リンク先ではすべてのプラグインに対してスクリーンショットが掲載されていますので、視覚的に見たい方はそちらも是非どうぞ。

関連リンク

---

---