JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。
jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。
ここでは、フォーム関連のjQueryプラグインを紹介しています。

国際電話番号を判別するjQueryプラグイン「jquery.mobilePhoneNumber」

電話番号を入力してもらう際に国際電話のケースもあるかもしれません。 その際はjQueryプラグインの jquery.mobilePhoneNumberを利用するとユーザーに安心感を与えられるかもしれません。

via:jquery.mobilePhoneNumber

しゃれとる!スマホでも快適カレンダーのjQueryプラグイン「datedropper」

ここまで、しゃれとるカレンダー表示はなかったのではないでしょうか。 しかも導入は簡単で、スマホも快適UIなので、これでユーザーのフォーム入力も捗ることでしょう。

via:datedropper - jQuery Dates Plugin

履歴書っぽいグリッドなフォームを作成するjQueryプラグイン「Grid forms」

フォームを作成する際に、レスポンシブでそれなりのデザインでユーザビリティも考慮して・・・とかなると煩雑ですよね。 そんな時にはjQueryプラグインのGrid Formsを利用してみてはいかがでしょうか。

via:Grid Forms

地味に便利!selectボックスをユーザーフレンドリーにするjQueryプラグイン「Chosen」

セレクトボックスって選択項目が長くなると幅が広がったり、項目がいっぱいあると下のほうが見つけにくかったりしますよね。 jQueryプラグインのChosenを利用すると、指定した幅で文字を折り返したり、検索機能をつけることができ、利用者によって使い勝手がかなり良くなります。

via:Chosen

殺風景な入力フォームを彩るファンシーなjQueryプラグイン「fancyInput」<

ネタ的なやつですが、殺風景なフォームを華麗に装飾することができるjQueryプラグインfancyInputです。 もしかしたらコンバージョン率が上がるかもしれません。

via:fancyInput

おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」<

フォームの入力は簡単にすることで離脱率を下げることが可能です。 日付を入力させるところもカレンダーで表示すると、簡易化できまたわかりやすいので、誤入力が減りそうです。 Pickadate.jsはこれを実現するjQueryプラグインです。

via:Pickadate.js

メールアドレスが微妙に違っていたら「これですか?」って教えてくれるjQueryプラグイン「mailcheck.js」

メールアドレスが微妙に違うので、ログインできない。 これって離脱率が上がる要因ですよね。 jQueryプラグインのKicksend/mailcheckを利用すると、「もしかしたら・・・これじゃない?」ってのをリコメンドしてくれちゃいます。

via:Kicksend/mailcheck

Facebookライクな@mentionができるJavaScript「jquery.mentionsInput」

Facebookでは@名前で候補が出てきて便利です。 今回紹介するjquery.mentionsInputはこのUIを実現するものです。

via:jquery.mentionsInput

JavaScriptでパスワードの強度チェック「Password Strength」

パスワードの入力で1111などとするユーザーがいたりします。 こういった方にはPassword Strengthを利用し、その危うさを示してあげるといいかもしれません。

via:Password Strength

一味違ったCaptchaを導入できるJavaScript「MotionCAPTCHA」

フォームやコメントでスパムを防止するためCAPTCHAというテストを求められることがあります。 今回紹介するMotionCAPTCHAは形をなぞるという一味違った形式でCAPTCHAを実行させることが可能です。

via:MotionCAPTCHA

セレクトメニューの選択肢を画像にする「Image Select plugin with jQuery」

セレクトメニューは文字列でイメージしにくい時があります。 そんな時、画像で選択肢を見せてあげると、ユーザーにとってわかりやすいかもしれません。 jQueryプラグインのImageSelectでは、これを簡単に実現できます。

via:ImageSelect

こんなデザインのセレクトメニューが欲しかった!華麗なスタイルのDropKick.js

味気ないフォームを彩りたい時にはDropKick - a jQuery plugin for beautiful dropdownsを利用するとセレクトメニューを印象的なデザインに変更することができます。

via:DropKick

綺麗なデザインでフォームを彩るバリデーション付きjQueryプラグイン「Formly」

フォームにデザインを加えてかつバリデーションもつけてしまうjQueryプラグインです。 Formly - The form glamorizer for jQueryを利用することで3種類のテイストの異なるデザインを簡単に適用可能です。

via:Formly - The form glamorizer for jQuery

フォームの入力エラーをわかりやすくする「Form validation using jQuery」

フォームの入力補助はコンバージョンを上げるためにも必須となっています. その中でエラー時に何がいけないのか示すことも重要と言われています。 今回はエラーをわかりやすく表示するjQueryプラグインForm validator plugin for jQueryを紹介します。

via:Form validator plugin for jQuery

jQueryでCaptcha認証を導入できるプラグイン「jQuery.buttonCaptcha」

フォームにある画像認識のCaptchaをjQueryで導入してみましょう。 jQuery.buttonCaptchaなら好きな言葉を自分で設定することも可能です。

via:jQuery.buttonCaptcha

jQueryでウィザードを作れるプラグイン「jquery.wizard.js」

iPhoneライクに数字をスクロールさせるJavaScript「mobiscroll」

iPhoneの数字スクロールはインターフェースが変わり、設定すら楽しいUIになります。 これをjQueryで実現したmobiscrollを紹介します。

via:mobiscroll

jQueryでウィザードを作れるプラグイン「jquery.wizard.js」

jQueryでウィザードを作れるプラグイン「jquery.wizard.js」

フォームとかステップをおって見せたい内容とかウィザード形式で見せられるといいですよね。 Wizard - a jQuery plugin by Testbaudsonはそれを実現することが可能です。

via:Wizard

フォームの入力内容をチェックするjQueryバリデーションプラグイン「JQuery Form Validation And Hints」

フォームの入力内容をチェックするjQueryバリデーションプラグイン「JQuery Form Validation And Hints」

フォームに入力された内容を送信前にチェックするバリデーションの紹介です。 これにより、ユーザーの入力間違いを簡易的に防ぐことが可能です。

via:JQuery Form Validation And Hints

jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」

jQueryでiPhoneライクなチェックボックス&ラジオボタン「jQuery LightSwitch Plugin」

iPhoneの素晴らしいUIをあなたのサイトでも。 そんな願いをチェックボックスとラジオボタンで叶えてくれるJavaScriptです。

via:jQuery LightSwitch Plugin

jQueryでフォームのselect要素をスタイリッシュに! via:JQuery Narrative Select Plugin

jQueryでフォームのselect要素をスタイリッシュに!

selectってなんだか味気ないですよね。
そんな訳でJavaScriptライブラリのjQueryプラグインを使ったスタイリッシュにselectを変えてみましょう。。

via:JQuery Narrative Select Plugin

jQueryでフォームのラベルをウォーターマーク的にオシャレ表示

jQueryでフォームのラベルをウォーターマーク的にオシャレ表示

フォームに何を入力していいかうっすら表示するウォーターマークをたまに見ます。 これによりユーザビリティの向上が図れます。 このウォーターマークをオシャレに表示するjQueryプラグインSliding Labels jQuery Pluginを紹介します。

via:Sliding Labels jQuery Plugin

JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」

JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」

世の中にiPhoneが溢れ返る時代だから、PCのフォームもiPhoneライクにしてみませんか。 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowで紹介されているチュートリアルでラジオとチェックボックスをiPhoneぽくしてみましょう。

via:iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrow

JavaScriptを利用してリアルタイムに翻訳させる「jQuery Translator」

JavaScriptを利用してリアルタイムに翻訳させる「jQuery Translator」

サイトは国境を超え、さまざまな人が閲覧します。 ただし、英語、フランス語、スペイン語と別にページを用意したらコストが膨大になります。 そこでjQuery Translatorの出番です。 Googleが提供するGoogle AJAX Language APIを簡単に利用して翻訳させることが可能です。

via:jQuery Translator

ロックを解除しないと送信不可能にするJavaScript「slideLock」

ロックを解除しないと送信不可能にするJavaScript「slideLock」

近年スパム防止のためフォームにCAPTCHA(キャプチャ)と呼ばれる仕組みを導入しているケースが多く見られます。 これ読みにくい英数字なので、本当に読めない場合がありイラッとすることもあります。 JavaScriptライブラリの大御所jQueryのプラグインslideLockを利用するとロックを解除するだけなので、ユーザーフレンドリーになります。

via:slideLock

入力したパスワードを表示するJavaScript「Password (un)Masking」

入力したパスワードを表示するJavaScript「Password (un)Masking」

確認などもあるとパスワードに何を入力したかわからなる場合があります。 入力したパスワードを表示させることでユーザーにとってわかりやすくなるかと思います。 jQueryを利用した「Password (un)Masking | VileWorks」を紹介します。

via:Password (un)Masking | VileWorks

Twitterライクに、あと何文字?を表現するJavaScript」

Twitterライクに、あと何文字?を表現するJavaScript

Twitterの右上には入力できる数字が表示されています。 これと同じようなものをjQueryのプラグイン「Simplest Twitter-like dynamic character count for textareas and input fields」を利用して導入します。

via:Simplest Twitter-like dynamic character count for textareas and input fields

パスワード強度を明示するJavaScript「Password Strength」

パスワード強度を明示するJavaScript「Password Strength」

パスワードに名前だったり、1111などを登録するユーザーもいます。 そんな時にパスワード強度を明示してあげると良いかも知れません。

via:AutoSuggest jQuery Plugin

フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」

フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」

Googleなどの検索では1文字いれると候補が出てきます。 ユーザビリティ向上のため、このようにフォームにも入力補助があると好ましくなります。 JavaScriptのAutoSuggest jQuery Pluginを利用することで簡単に導入できます。

via:AutoSuggest jQuery Plugin

複数のselect要素を連動させるJavaScript「Dependent Select」

複数のselect要素を連動させるJavaScript「Dependent Select」

フォームなどで段階的に選択内容を絞り込ませられるとユーザビリティが向上しそうです。 jQueryプラグインDependent Selectでは複数のselect要素を連動させることが可能です。

via:Dependent Select

Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」

Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」

フォームなどである数値からある数値までを入力してもらいたいとき、スライダーなどで明示できるとユーザーに配慮できます。 今回はjQueryプラグインの「jQuery Slider plugin (Safari style) 」を使用し、手軽に実現してみたいと思います。

via:jQuery Slider plugin (Safari style)

Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」

Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」

appleのデザインっていいですよね。 サイトでも使いたいですよね。 jQueryプラグインjQuery Safari Searcherを使用すると検索フォームをSafariっぽくできます。

via:jQuery Safari Searcher

フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」

フォームに入力したら削除マークを表示するJavaScript「Clearable Text Field」

フォームに入力した内容を消したいとき、「×」マークがあったら便利ではないでしょうか。 JavaScriptライブラリであるjQueryのプラグイン「Plugins | jQuery Plugins」を使用して実現します。

via:Plugins | jQuery Plugins

ステップ分けできるJavaScript「Smart Wizard」

ステップ分けできるJavaScript「Smart Wizard」

申込フォームなどが長くなるとき、ステップごとにわけることで離脱率を下げられる場合があります。 jQueryプラグインの「SmartWizard」を使用することで、これを実現可能です。

via:SmartWizard

jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery

jQueryでフォームの値がない場所を揺らす via:Animate validation feedback using jQuery

フォームに未入力項目があった場合、背景に色をつけたり、枠線の色を変えたりします。 今回はさらに目立たせるため、揺らしてみることにします。

via:Animate validation feedback using jQuery

jQueryでフォームの入力内容を自動チェックするJavaScript「vanadium」

jQueryでフォームの入力内容を自動チェックするJavaScript「vanadium」

フォームの入力内容を送信前にチェックすると有益な情報を得る可能性が高くなります。 またコンバージョン、ユーザビリティの向上にも役立つことができるでしょう。 今回はjQueryプラグイン「vanadium」を利用します。

via :vanadium

フォームに入力を促すヒントを表示するJavaScript「jQuery Advisor plugin」

フォームに入力を促すヒントを表示するJavaScript「jQuery Advisor plugin」

フォームの申し込み率を上げるためには、入力内容をわかりやすくすることが必要です。 jQuery Advisor pluginを利用することで、JavaScriptを利用して、ヒントを明示できコンバージョンの向上が期待できるかもしれません。

via :jQuery Advisor plugin

フォームの入力項目をリアルタイムでチェックするJavaScript「Valid8」

フォームの入力項目をリアルタイムでチェックするJavaScript「Valid8」

最近お問い合わせフォームでリアルタイムに入力項目をチェックするサイトが増えてきているように感じます。 ユーザビリティを向上させられ、お問い合わせ数の増加に期待できそうです。 JavaScriptのライブラリ「jQuery」のプラグインValid8を使用すると簡単に導入できます。

via :Valid8

パスワード入力のユーザビリティ向上を「iPhone-like password fields using jQuery」

パスワード入力のユーザビリティ向上を「iPhone-like password fields using jQuery」

inputのtypeをpasswordにすると入力内容すべてが●にされてしまうため、誤入力の可能性があります。 そこで、iPhone-like password fields using jQueryのように最後の1文字を見せるだけでもユーザビリティを向上させることができるのではないでしょうか。

via :iPhone-like password fields using jQuery

ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」

ステップ分けするウィザードを実現するJavaScript「jquery-jwizard」

WEBでは何ステップかに分けるウィザード形式により、入力や閲覧させることで、コンバージョンの向上につなげることがあります。 jquery-jwizardを利用すると1htmlでステップ分けをすることができます。

via :jquery-jwizard

パスワードの強度を明示するJavaScript「jQuery Password plugin」

パスワードの強度を明示するJavaScript「jQuery Password plugin」

フォームに入力されるパスワードが安易すぎて憂鬱になる運営者の皆様へ。 JavaScriptライブラリjQueryプラグインの「jQuery Password plugin」を使用して、その憂鬱さを晴らしましょう。 パスワードの強度を判別し、一定以下だと登録できなくなくします。

via :jQuery Password plugin

JavaScriptでCaptchaぽいのを作る「jQuery Real Person」

JavaScriptでCaptchaぽいのを作る「jQuery Real Person」

フォームを送信する時に、スパムを防ぐためCaptchaという認証方式をとることがあります。 本格的に作るとなると非常に面倒だったり、画像が変形しすぎたりします。 今回はJavaScriptライブラリのjQueryプラグインjQuery Real Personを使用して、お手軽に導入してみます。

via :jQuery Real Person

入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」

入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」

inputなどフォームのフィールドにうっすら文字を表示させておくと、ユーザーに入力を促すことが可能です。 JavaScriptライブラリのjQueryプラグイン「JQUERY.FIELDTAG.JS」を使用することで簡単に導入可能です。

via :JQUERY.FIELDTAG.JS

jcrossSelect

フォームのselectをスタイリッシュに彩るJavaScript「jQuery Stylish Select plugin」

formを使用する時にデフォルトのものだとちょっと味気ないです。 そんな時に今回のJavaScriptjQuery Stylish Select pluginを利用すると、selectを鮮やかにすることができます。

via :jQuery Stylish Select plugin

jcrossSelect

selectの複数選択を可能にするmultiple属性をJavaScriptで直感的にする「jQuery crossSelect plugin」

htmlのselectタグには複数選択を可能にするmultiple属性があります。 でも、なんとなくわかりにくくありませんか? そんなときはjQuery crossSelect pluginを利用して、直感的でわかりすいフォームにしましょう。

via :jQuery crossSelect plugin

jvalidator

JavaScriptでフォームの入力項目をリアルタイムでチェックする「jQuery Form Validators」

フォームに間違った内容が入力された際に、どこがどう間違っているかを表示してくれるとわかりやすくなります。 jQuery Form ValidatorsならJavaScriptで実現可能です。

via :jQuery Form Validators

jsimpleFilter

入力内容を推測して候補を表示するJavaScript「jQuery Simple Filter」

フォームで項目を入力させるとき、県名など決まりきったものであれば、1文字目の入力で候補を挙げることがユーザビリティ上、好ましいです。 jQueryプラグインjQuery Simple Filterを利用するとJavaScriptを利用して簡単に作成できます。

via :jQuery Simple Filter

jformtips

フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」

ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。 JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。

via :jQuery Form Tips

jtypewriting

ちょっとうざい(?)入力ヒントJavaScript「jQuery Type-Writing Hint」

フォームなどのテキストボックスには、入力すべき内容を表示してあるのがユーザビリティ上、望ましいです。 jQuery Type-Writing Hintを使用すると過剰なくらいに入力を促せます。

via :jQuery Type-Writing Hint

jWatermark

フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」

フォームの入力項目にうっすらテキストを表示するJaフォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。

via :jQuery Watermark Plugin

jautoresize

テキストエリアを入力内容に応じて自動でリサイズするjQueryプラグイン「autoResize」

フォームに設置するテキストエリアはある程度大きくしておきたいところですが、スペースをとるのは避けたい。
そんなあなたに朗報です。 jQueryプラグインのautoResizeで入力内容に応じてリサイズ可能になります。

via :autoResize

jflexselect

フォーム入力内容に近い言葉だけ表示するjQueryプラグイン「flexselect」

フォームをselectしたとき選択項目が多いと縦長になってユーザビリティが低下します。 そんな悩みを解決するのが、jQueryプラグイン「flexselect」 入力内容に近い言葉をだけを残してくれます。

via :flexselect

jmaxlength

フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」

フォームで文字数を制限することがよくあると思います。 Maxlength PluginではJavaScriptライブラリjQueryを利用し、文字数制限を実現します。

via :Maxlength Plugin

jliveFilter

入力内容の絞込みを行うJavaScript「Live Filter」

多くのリストから絞り込む時にこんなツールがあると便利でしょう。 JavaScriptライブラリ「jQuery」プラグインのLive Filterを使用するとボックスに入れた内容で絞込みが出来ます。

via :Live Filter

jMonthCal

jQueryでカレンダーを表示するプラグイン「jMonthCalendar」

カレンダーを表示したい時、月ベースで一覧できると便利です。 JavaScriptライブラリ「jQuery」のプラグインjMonthCalendarでは、お手軽にカレンダーを作成可能です。

via :jMonthCalendar

jqTransform

JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」

フォームはユーザーが積極的にアクションを起こす、重要なページです。 そのデザインを華麗かつわかりやすくすることは、ユーザーにとっても有意義なことになるでしょう。 今回のjqTransformはJavaScriptライブラリjQueryを使用して、フォームを綺麗に彩ります。

via : jqTransform

jClockPick

時間の入力支援javascript「ClockPick」

日付の入力支援にはDatePickerがあります。 ClockPickは、時間用の入力支援javascriptです。

via : ClockPick

jCal

JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」

JavaScriptでカレンダーを作る方法はいろいろありますが、なかなか満足のいくものは多くありません。
jCalはJavaScriptライブラリ「jquery」を使用し、お手軽かつクールなカレンダーを作成可能です。

via :jCal

jCalendar

jQueryベースのカレンダー作成javascript「jCalendar」

フォームなどでは日付を指定させることが多く、利便性が求められます。 jCalendarはjQueryベースでカレンダーを作成するjavascriptで、利用者のユーザビリティーを向上させることができます。

via : jCalendar

jTimeEntry

時間を指定するjavascript「jQuery Time Entry」

フォームなどで時間を入力して欲しいことがあるかもしれません。 そんなとき、jQuery Time Entryを利用すれば、入力が簡単になるかもしれません。

via : jQuery Time Entry

jMultipleFileUpLoad

アップロードファイル複数指定できるjavascript「Multiple File Upload plugin for jQuery」

ファイルをアップロードするとき1つずつでは手間がかかります。 また、アップロードしてもらう時には、指定のファイル拡張子以外送ってもらいたくありません。 Multiple File Upload plugin for jQueryは複数かつ拡張子を指定してアップロードさせるjavascriptです。

via : Multiple File Upload plugin for jQuery

jTimeSelect

時間を選択できるjavascript「jQuery.ptTimeSelect」

フォームでは日付のほかに時間を求めることがあります。 日付同様、時間にも人により様々な書き方があるので、定型の形式を選択できると利用者、制作者にとって便利になるでしょう。 jQuery.ptTimeSelectは視覚的にもわかりやすい時間選択javascriptです。

via : jQuery.ptTimeSelect

MaskedInput

フォームの入力を限定するjavascript「MaskedInput」

フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。 digitalBushMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。

via : digitalBush

textgrow

テキストボックスを伸長させるjavascript「Text Grow」

画像表示では「LightBox」などを使用することで、限られたスペースの中で多くの情報を掲載させられます。 一方、フォーム関連では大きさを調節することができませんでした。 Left LogicText Growでは、文字数に応じてテキストボックスが大きくなるscriptを配布しています。

via : Left Logic

niceform

フォームを鮮やかに彩るjavascript「NiceForms」

お問合せフォームなどのデザインはシンプルになりがちです。 しかし双方向性が重要視されていることから、フォームなどもデザインを考える必要があります。 NiceFormsはフォームを簡単に彩ることができます。

via : NiceForms

jCountDown

文字カウントjavascript「jCountDown」

フォームなどを作成する時に文字数を指定したい時があります。 5 JavaScript Tricks Made Easy with jQueryで紹介されている5つのスクリプトの中に指定した文字数にむかってカウントダウンするスクリプトがあります。

via : jCountDown

jDatePicker

jQueryベースの日付選択javascript「jQueryDatePicker」

フォームなどで日付を入力してもらうときなどに、日付を視覚的に確認できると利用者にとって便利です。 また入力ミスが減るなどの利点があります。 kelvinluck.comjQueryDatePickerを使用すると、日付選択が可能なフォームを作成することが出来ます。

via : jQueryDatePicker

jFAutocomplete

自動文字参照javascript「jQuery Autocomplete」

フォームで文字を入力すると自動で該当する文字を示してくれるオートコンプリートがあります。 これを利用すると入力間違いが減少するなど訪問者・開設者の双方に役立ちます。 今回は、jQueryベースのjQuery Autocompleteを取り上げます。

via : jQuery Autocomplete

jTagging

タグを簡単にフォームに挿入するjavascript「jTagging」

ソーシャルブックマークなどに代表されるWeb2.0の世界ではタグにより細かく分類されることが多くなっています。 その細かさゆえ、入力が面倒になっているのも事実です。 jTaggingはタグの入力を簡便にしてくれるjavascriptです。

via : jTagging

このエントリーを含むはてなブックマーク この記事をクリップ! Yahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する