デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
「行列のできる入力フォーム」、ポイントは4つのおもてなし
入力フォームに対してもっと企業は「おもてなし精神」を持つべきだ――と言いたい。せっかくカッコいいWebサイトでも入力フォームがそっけなければ客は離脱してしまう。デルのサイトを参考に、行列のできる入力フォームを考えてみよう。 わたしの会社では、いくつかWebマーケティングの改善サービスを行っている。中でも「フォームアシスト」と呼ばれる入力フォームの改善サービスは、国内でいち早くスタートしたこともあり、ライセンス数350を超える主力商品だ。 フォームアシストは今どきのSaaSというかASP型の期間レンタルサービスで、顧客の持っている資料請求ページや購入ページの離脱を改善することを目的にした商品である。当社のコンサル曰く、「平均で9.45％の離脱改善効果が出ている」というのだから、理論上は集客が増えなくても売上10％向上につながる費用対効果抜群のサービスだ（ちょっと自画自賛しすぎかも）。 ちなみ
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
10 Intelligent Ways of using [FORM] Elements - noupe
When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty smart results using the <form> tag. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move. The post below is made up of 10 smart and intelligent ways of using <form> elements to produce some neat effects, c
![10 Intelligent Ways of using [FORM] Elements - noupe](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d2cc874ae7b892c2e8e283801c3438ab019b3ca/height=288;version=1;width=512/https%3A%2F%2Fnoupe.com%2Fimg%2Fform-usages-1.jpg)
HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript:phpspot開発日誌
jQuery Dropdown Check List HTMLだけでは実現できないドロップダウンチェックリストの作成JavaScript。 複数選択式の選択リストは普通に作成することが出来ますが、チェックボックスを使ったわかりやすいＵＩの実現は難しいですね。 「jQuery Dropdown Check List」ならjQueryプラグインなので、非常に簡単に実現できます。 $("#s6").dropdownchecklist(); のように、１行で初期化できるところも素晴らしいですね。 一昔前にやっていれば、どうやってやってるんだろうと検討もつかなかったと思いますが、進化したものです。 関連エントリ JavaScriptを使ったULリストをツリー風に表示するサンプル「Simple Tree Menu」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
