フォーム周りで活躍してくれるjQueryプラグイン 50

  • Posted on
  • Category : Tips
フォーム周りで活躍してくれるjQueryプラグイン 50

少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、面白い動きを実装できるものまで様々なタイプがあります。中にはCSS3を併用したり、そのままでは日本語に対応していないというものも幾つかあるので、使う際にはブラウザやデバイス環境によっていろいろ確認する必要はあるんですが、いずれも便利なプラグインばかりです。

exValidation

exValidation

プラグイン作者が日本の方なので、ひらがなやカタカナといった日本語のチェックもできるバリデーションプラグイン。

Validetta

Validetta

シンプルで軽量なバリデーションプラグイン。

jQuery Valideasy

jQuery Valideasy

jQuery Validation Engine

jQuery Validation Engine

Parsley.js

Parsley.js

Formance.js

Formance.js

クレジットカード・メールアドレス・電話番号・時間など様々なフォーマット指定ができ、入力した際の内容を自動補完をしてくれます。

formatter.js

formatter.js

同じく入力パターンを組み込めるプラグインで、クレジットカードと電話番号入力をフォーマットに沿った場合でしか入力できないようにしてくれます。

jQuery Mask Plugin

jQuery Mask Plugin

同じくフォーマットを設定できるプラグイン。

jQuery Complexify

jQuery Complexify

現在入力されたパスワードがどれくらいの強度なのかを表示してくれます。

jQuery Show Password Plugin

jQuery Show Password Plugin

通常パスワードは何が入力されているか見た目ではわかりませんが、「show」ボタンを押すと入力した内容を見れるようにできます。

jQuery EasyDropDown

jQuery EasyDropDown

jQuery Selectbox plugin

jQuery Selectbox plugin

jQuery Selectric

jQuery Selectric

FancySelect

FancySelect

Chosen

Chosen

select要素にインスタンス検索(入力中に結果を表示してくれる検索)を実装できます。
機能も便利だし一応日本語でも使えるんですが、ブラウザによって大きく崩れたり動かないとかあるので注意…。

Minimalect

Minimalect

Select2

Select2

jQuery multiselect

jQuery multiselect

select要素でoptionの複数選択を簡単にできるようにしてくれます。

Multiple Select

Multiple Select

同じくoptionの複数選択を簡単にできるようにするプラグイン。

Image Picker

Image Picker

select要素のoptionを選ぶと設定した画像が選択されたり、逆に画像をクリックするとoptionが選択されるといった連動ができるプラグイン。

selectize.js

selectize.js

select要素をタグ表示のように見せることができます。

iCheck

iCheck

チェックボックスとラジオボタンのデザインを変更できます。
ミニマル・フラット・ポラリスなど、6種類のデザインがスキンが用意されています。

ui.elements

ui.elements

jQuery prettyCheckable

jQuery prettyCheckable

Uniform

Uniform

iOS Checkboxes

iOS Checkboxes

iPhone Style Radio and Checkbox Switches

iPhone Style Radio and Checkbox Switches

iToggle for jQuery

iToggle for jQuery

Label Better

Label Better

正確にはplaceholderではないですが、placeholderに設定してある文言をフォーカス時にラベル代わりに表示させるような感じのもので、動きが可愛らしいです :)

FloatLabel.js

FloatLabel.js

同じくplaceholderがフォーカス時にラベル代わりになるようなものを実装します。

Multi-Step Signup Form With CSS3 and jQuery

Multi-Step Signup Form With CSS3 and jQuery

CSS3とjQueryを使って、次のステップに行く際やエラーを表示する際にアニメーションを付加でき、フォームの進捗状況を表すプログレスバーも表示されています。

Gravity Registration Form with Jquery

Gravity Registration Form with Jquery

はじめは入力欄はひとつしかないですが、項目を入力する毎に入力欄が次々とアニメーション表示されます。

jQuery-FormHelp

jQuery-FormHelp

この項目は何をどのように入力するかといったようなヘルプをツールチップで表示させることができます。

In-Field Labels jQuery Plugin

In-Field Labels jQuery Plugin

フォーカスされた要素に設定してあるplaceholderを少し薄くするプラグイン。

ah-placeholder.js

ah-placeholder.js

placeholderを非対応ブラウザにも対応させることができます。

Progression.js

Progression.js

フォームの進捗度をツールチップとプログレスで表示してくれます。

jQuery Fullscreen Editor

jQuery Fullscreen Editor

右上に表示されるボタンをクリックするとtextareaが大きく表示され、文字入力や編集などを行いやすく・見やすくすることができます。

jQueryTextCount

jQueryTextCount

BlackFlag」さんで紹介されている、jQueryを使ってTwitterのように入力した文字数をリアルタイムで表示する方法。
カウントダウンやカウントがマイナスの値になった際に背景色を変更する方法も一緒に紹介されています。

jQuery Autosize

jQuery Autosize

入力されたテキスト量に応じて、自動でtextareaをリサイズしてくれます。
キャプチャではカクカクした動きですが、実際は滑らかな動きでリサイズされます。

jQuery.textcomplete

jQuery.textcomplete

textareaにオートコンプリート機能を実装できます。

AutoJS

AutoJS

同じくtextareaにオートコンプリート機能を実装できるプラグイン。

fancyInput

fancyInput

日本語未対応なので使用する機会は少ないと思いますが、文字入力にアニメーションを付加できます。

Dropzone.js

Dropzone.js

ドラッグアンドドロップでファイルをアップロードできるようにします。

jQuery File Upload

jQuery File Upload

slideControl.js jQuery Plugin

slideControl.js jQuery Plugin

スライドコントロールを実装できるプラグインで、色はCSSで設定されているので自分好みの色に変更するのも簡単です。

pickadate.js

pickadate.js

モバイルやレスポンシブにも対応した日付・時間ピッカーを実装できます。

Timepicker Plugin for jQuery

Timepicker Plugin for jQuery

シンプルで軽量なタイムピッカープラグイン。

Sisyphus.js

Sisyphus.js

入力されたデータを自動保存してくれます。

Smart Input Field Position Indicator

Smart Input Field Position Indicator

カーソル位置が明示されて、入力内容の大体の長さも可視化できるプラグイン。

MotionCAPTCHA

MotionCAPTCHA

一般的にスパム防止などの理由で設置されるCaptcha認証はパッと見で読みにく文字をテキスト入力するというものだと思いますが、これは表示された形に沿ってなぞるという少し変わったCaptcha認証を実装できます。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。