CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js
フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 バリデーション用のライブラリです。軽量でクロスブラウザ対応。コードもシンプルでカスタマイズしやすい印象でした。 サンプルです。エラーメッセージは適当なので気にしないで下さい。 Sample コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script t
jQueryでフォーム改善：文字数のカウントアップ — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
入力したテキストの文字数をカウントアップ フォームの入力で文字数制限がある場合に使えます。 ここで紹介するのはtextarea要素ですが、input要素でも使えます。 HTMLソース span要素内の数字がカウントアップされます。 <textarea type="text" id="input-up"></textarea> <span id="countUp">0</span> Javascriptソース $(function(){ $("textarea").keyup(function(){ var counter = $(this).val().length; $("#countUp").text(counter); if(counter == 0){ $("#countUp").text("0"); } }); }); keyupイベント ここでキーになるのがkyeupイベントで
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
jQuery Plugins for Styling Checkbox & Radio Buttons
The checkbox and radio button versions of input elements used in forms on the web are amongst the most difficult to style according to your overall web design. These elements will display differently depending on the user’s operating system, but we can change their appearance globally with the help of jQuery. This roundup links up 12 jQuery plugins for styling checkbox and radio buttons, as well a
カーソルを合わせると拡大するかっこいい検索窓作成jQueryサンプル:phpspot開発日誌
jQuery Smooth Animated Search Field Freebie | The Finished Box カーソルを合わせると拡大するかっこいい検索窓作成jQueryサンプル。 通常はグレーで目立たないように表示されていて、クリックするとハイライトされ検索窓が大きくなるものが実装できます。 小気味よくアニメーションする部分もいいです。 プログラム一式のダウンロードが可能なので再利用できます。 関連エントリ jQueryベースの画像スライダー３０まとめ iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」
セクシーなフォームがつくれるjQueryのプラグイン「Uniform」 | Web活メモ帳
Uniformはセクシーなフォームが作れるjQuery用のプラグインです。 チェックボックス、ドロップダウンメニュー、ラジオボタン、ファイルアップロードフォームの見た目を変える事が可能になっています。 特に画像アップロードはiPhone風でかっこよいですね。 詳しくは以下 カスタイズ可能なスキン テーマを変更する事で全体のスキンを自由に変更できるようです。 使い方 まずはjsと指定のcssを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.uniform.js" type="text/javascript"></script> <link rel="stylesheet" href="uniform.default.css" type="text/css" media="
[JS]フォームの入力欄を次々にアニメーションで表示するスクリプト
フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。 Gravity Registration Form with Jquery デモページ [ad#ad-2] フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。 一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。 フォームの実装 フォームの各項目は、リスト要素で実装しています。 HTML <form method="post" > <ul> <li class="email"><label>Email: </label><br/> <input type="text" username="email" id="email" AUTOCOMPLETE=OFF/><span
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
フォーム入力に役立つjQueryプラグイン
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」:phpspot開発日誌
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 2010年11月29日- jQuery.superselect アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」。 以下が普通のselect ですが…。 使用後は次のようにファンシーな感じに。 なんかページデザインとselectボックスのデザインに統一感がないというようなケースや、アイコンを付けてわかりやすく選択してもらいたい場合に使えそうですね。 <option>タグのrel属性にアイコンを設定しておいて、$(element).superselect() とやると実現できるみたいです。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサンプル集 斬新なコメントフォームデザイン集
noupe - THE magazine for webworkers and site owners
Saving for college is quite a daunting task. We all want to set our kids up for success, right? But, the path to financing their dreams can feel like a maze of decisions and ...
jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ:phpspot開発日誌
FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」:phpspot開発日誌
チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 2010年08月03日- Plugins | jQuery Plugins チェックボックスに３つの状態を持たせられるjQueryプラグイン「TRI-STATE CHECKBOX」 通常、チェックボックスといえばONかOFFかですが、中間の意味を持つ状態を次のように表せるようになります。 例えば、Header1 の下位のアイテムが全部チェックされていないけど、部分的にチェックされているという状態を表せます。 ウイルスソフトの部分指定なんかにデスクトップアプリケーションでは採用されているUIですね。 下位のアイテムを全部チェックすると、Header1は通常のチェック状態になります。 使いどころによっては便利なUIづくりに役立てられそうですね。 関連エントリ フォームに簡易電卓を組み込める
今日から現場で使えるjQueryのフォーム関連プラグイン15選
Webサイト制作で欠かせないのがフォーム。 これらは購入時や、お問い合わせ、ログインと言ったパーツで良く使われます。 今回はそんなフォームにスポットを当てて、なるべく使いやすく、導入しやすいものをご紹介いたします。 ただし、あくまでもjQueryプラグインのご紹介なので、よくわからないと言う方は華麗にスルーしてください。細かい導入方法までは説明しません。 機能性重視プラグイン In-Field Labels jQuery Plugin フォームの中に入っている文字がオンクリックでうっすらと消えていくプラグイン。 なかなかいい感じ。 Create a Progress Bar With Javascript | Nettuts+ demo シームレスにフォームの内容を変え、さらにどれくらい進んでいるかが％で確認できる。 overset - jVal - jQuery Form Field V
フォーム周りに使えるjQueryプラグイン50 – creamu
フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です。 バリデータやアップローダ、パスワードの安全性チェックなど、いろいろありますね。 jQuery “Highlight” Plugin フォーカスが当たっているフォームに背景画像を敷いて、ハイライトしてくれるプラグイン Autotab: jQuery Auto-Tabbing and Filtering 電話番号などのinputで、自動で次のinputにカーソルを移動してくれる jQuery NobleCount Twitterのような、あと何文字入力できる、を表示してくれる「jQuery NobleCount」 AJ
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌
１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin １個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 １個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 １個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://www.designwalker.com/2010/06/jquery-forms.html
