CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor
Hello! I’m Doctor Peter and I’m here to treat you with a dose of complementary CSS3. Don’t worry, this won’t hurt a bit. Contrary to what HTML5 Please and the W3C would have you believe, CSS3 is not part of HTML5. “But this is HTML5 Doctor,” I imagine you saying. “Why are you talking about CSS3 here?” Well, I want to talk about a very specific part of CSS3, one that works in perfect tandem with HT
Free Cheat Sheet For Designing Web Forms — Smashing Magazine
Created by Joe Leech and released for Smashing Magazine and its readers, this sheet contains an Omnigraffle template, as well as Photoshop (PSD) and PDF examples for you to download and use as you wish. Forms, forms, forms: so often overlooked in design. In this post, we are pleased to release the Form Design Cheat Sheet, created by Joe Leech and released for Smashing Magazine and its readers. Thi
２次元のラジオボタンを作るチュートリアル＆jQueryサンプル:phpspot開発日誌
Radio Buttons with 2-Way Exclusivity | CSS-Tricks ２次元のラジオボタンを作るチュートリアル＆jQueryサンプル 通常ラジオボタンというと１次元で、１グループで１個だけというのが特徴ですが、これを２次元にして普通とは違う使い方ができるようになるチュートリアルです 例えば、以下のような表に適用して、縦の重複も横の重複もできないような物を作れます。 ２つの物を組み合わせてそれぞれに独占させるような使い方が可能です。１対１のマッチングとかに使えそう 関連エントリ ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル ナビゲーションメニューに関する有用なjQueryチュートリアル集 IKEAの家具紹介画像っぽくイメージに注釈を入れるjQueryチュートリアル
Elements of Design: A Web Design Showcase
Elements of Design is a collection of UI components that highlight best practices for particular design patterns from leading websites around the world. Browse the archives and use it as a source of inspiration for your next web design project. The average shopping cart abandonment rate is slightly under 70%, which translates to billions of dollars in lost sales per year. As a result, an effective
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
１個目の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プラグインによって、比較的簡単に実装できま
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」:phpspot開発日誌
Catch My Fame New jQuery LightSwitch Plugin iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」。 次のようなUIで、チェックボックスやradioボタンと同じ働きをするUIを作ることが出来ます。 true, false で on/ off を切り替えるUIと、それらがDisabledになった例 radioボタンと同じ動きをする例。１個をyesにすると他がnoになります。 デモはこちら checkboxはありましたが、radioとして動くのは無かったかもしれませんね。 関連エントリ iPhoneのON/OFFを実現するjQueryプラグイン「iCheckbox」 iPhoneスタイルのチェックボックスをjQueryで簡単実装 何を入力したかが分かるiPhoneスタイルのパスワ
PHP Contact Form: Create Forms Using HTML & PHP - 1stWebDesigner
Are you ready? Let’s get started! Many WordPress plugins come with fully functional contact forms that can be installed and used right away, but we believe in beautiful design and in your right to style it however you choose. Therefore the first video will focus on how to create, but mainly how to style, your contact form using CSS3. Your Designer Toolbox Unlimited Downloads: 500,000+ Web Template
600以上のログインフォームをチェック - everything might happen tomorrow - yhassy - builder by ZDNet Japan
55 Spectacular Login Form Designs すぐれたログインスクリーンを 55 つも集めたリンク集。特に目立つのがページの中央に大きくログインフォームを表示させているのが多数を占めています。まるで、OS やデスクトップアプリケーションのようなログインスクリーンのようですね。今後、独自 ID だけではなく、OpenID を導入した際に見やすいフォームを実現させるかが課題です。Digg が良い感じですが、他の見せ方も模索されていくでしょう。 100 Outstanding Login Forms こちらは倍の 100 のログインスクリーンを集めたリンク集。上記のまとめとかぶっているサイトも多数ありますが、ビジュアルよりラベルの付けた方のバリエーションをたくさん見ることが出来るのはこちら。ラベルとインプットフィールドの位置関係がフォームの書きやすさにどれだけ関わるのか検証
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form|Dzine Blog
Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form In most online business the revenue of the site solely depends on the registered and active users and Making the visitor of your site to sign up isn’t easy, nobody likes to fill in forms . Web forms bridge the gap between the product and the customer therefore, we designers, need to figure out sound design make the form
ユーザ体験向上に役立つフォームのバリデーションスクリプトいろいろ - Feel Like A Fallinstar
エラーを減らし、より快適にフォームの入力を行ってもらうのは、コンバージョンを持つウェブサイトにとっての必須課題。 根本的にはインターフェース設計やエラー画面の設計、あるいはフォーム前の意欲醸成が大事なのですが、最近ではバリデーション絡みのJavaScriptのライブラリがかなり整理されてきました。 あんまりこのブログでスクリプト紹介とかはやらないのですが、たまたま丁度dzineblogで紹介があったので、備忘録的に。 JQueryを使ったスクリプト ■ A jQuery inline form validation 画像無しで利用できるスクリプトです。 ※CSS3を使っているので、ブラウザによっては角丸などのイフェクトの見え方が違ってしまうのがもったいないです。 ■ Valid8 - An input field validation plugin for Jquery デモページをち
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ:phpspot開発日誌
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ。 次のような、時間に関する指定が一括で出来ちゃうウィジェットが公開されています。 インプットボックスにカーソルを合わせるとポップアップして表示させることも可能です。 時間指定が便利になっていいかもしれませんね。 以下のエントリを参照してください。 Any+Time JavaScript Library
jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
しっかりと細部までデザインされたコンタクトフォームのデザイン集
http://www.csskarma.com/blog/sliding-labels/
)
jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields | Css Globe
12 Useful Tutorials to Style Web Forms
IDEA * IDEA