37 Free and Eye-catching PSD Login Forms | Naldz Graphics
Among the essential interactive elements in a website is perhaps a login form. A login form can build a strong impact on the minds of the site visitors even if it is used for just a fraction of seconds. Therefore, it is essential that you give consideration to every aspect incorporated into it. For those who lack enough time to design one on their own, we encourage you to browse our post for this
login design, freebies and inspiration - WebDesignShock
So, how important is a login screen for your next application or website? It’s the way you start the communication with your user, it’s the “hello world” section of your application, And believe us or not, it has to rules ! we have made a full research of the best (and fresh, like everything here in webdesignshock) login screens on the internet and prepare this huge list of both freebies and inspi
ユーザーが使いやすいフォームを設計するのに役立つチップス -Form design crib sheet
Free Download: Cheat Sheet For Designing Web Forms [ad#ad-2] チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。 Simple form field フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。 Buttons ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。 Optionals fields 任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。 Support text 入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。 Help text アドバイスするテ
[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear
フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。 jQuery Plugin: autoclear デモ [ad#ad-2] テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。 autoclearの実装 HTML 表示されるテキストは、title属性内のデータを利用します。 <form method="post"> <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name'];
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
Formalize CSS | SonSpring
Oct 16, 2010 — Topic: css Formalize CSS | View demo | Download | GitHub repo Formalize CSS — Dress up your forms! IntroAs designers, we are used to having quite a bit of control over how things are displayed in a browser. Sure, differing rendering engines don't always agree on everything, but for the most part we can at least find ways to mitigate variance through workarounds, or by writing for th
CSS3で作るクールなお問い合わせフォーム – creamu
フォームをCSS3で作りたい。 そんなときに参考になるのが、『Create A Clean and Stylish CSS3 Contact Form』。CSS3で作るクールなお問い合わせフォームです。 角丸やグラデ、シャドウなどをCSSで指定していますね。デモは以下から。 LIVE DEMO ソースもダウンロード可能ですね。 CSS適用前と適用後の解説がわかりやすいので、一度見てみてください。 Create A Clean and Stylish CSS3 Contact Form またかなり久々になってしまった・・・・。 納品とかサーバトラブルが重なってえらいことになっていました。7月もかなり詰まっているんですが、がんばっていきたいと思います。
フォームのラベルと入力欄を縦一列に配置するとより速く書きこめる三つのポイント
フォームのラベルと入力欄を縦一列に配置すると、横一行に比べてユーザーがより速く書きこめる三つのポイントを紹介します。 Why Users Fill Out Forms Faster With Top Aligned Labels 下記は各ポイントを意訳したものです。 visual fixation visual direction vertical space まとめ visual fixation 「visual fixation」は一点（面）をみつめる固視のことで、上記の五つ入力項目があるフォームでは、横一行：10箇所、縦一列：5箇所になります。 縦一列は一つの入力項目に対して、半分の固視ですみます。 visual direction 「visual direction」は視方向です。横一行は水平・垂直方向の二つを必要とし、縦一列は水平方向の一つのみです。 vertical space
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
HTML5で作られたフォームの入力チェックができる「jQuery Tools」 | Web活メモ帳
HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。 しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。 「jQuery Tools」を使う事で簡単に解決する事が可能になってます。 基本的なチェックは1行コードを追加するだけでできるようになるようです。 $("#myform").validator(); エラーメッセージのカスタマイズはCSSで実装できるとの事 /* error message */ .error { height:15px; background-color:#FFFE36; border:1px solid #E1E16D; font-size:11px; color:#000; pad
どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」:phpspot開発日誌
どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」 2010年07月22日- Commentics - A free PHP comments script どんなページにも高機能なコメントフォームを埋め込め一元管理できるPHPシステム「Commentics」。 コメントがないページにも、CAPTCHAやアバターアイコン、星レーティングやRSSフィード出力、メール通知といった高機能なコメントフォームを埋め込むことが可能です。 更に、システム全体に書き込まれたコメントの削除や修正が可能。バックアップ機能等も備わっています。 コメント欄が実際に実装された例。かなりの高機能ですが、機能を絞ってシンプルにすることも出来るみたい。 コメントをページに埋め込む際には、管理画面からコメントを埋め込むページを作って、次のようなPHPコードをページ内に埋め
Beautiful Contact Forms for your Inspiration
Contact forms have evolved a lot since the days of simple bland html forms. This holds especially true for portfolio websites and design agencies. The current designs are beautiful and can be extremely creative. Besides the common fields that everyone expects, forms can be enhanced by adding extra features such as maps, social networking information and appealing illustrations. A solid and elegant
JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」
twitter facebook hatena google pocket 世の中にiPhoneが溢れ返る時代だから、PCのフォームもiPhoneライクにしてみませんか。 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowで紹介されているチュートリアルでラジオとチェックボックスをiPhoneぽくしてみましょう。 sponsors 使用方法 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowからファイルをダウンロードします。 使うのはjQueryとswitch.gifです。 まずはhtmlを以下のように記述します。 <p class="field switch"> <input type="radio" id="rad
AJAX Crawler - Collection of DHTML and AJAX Samples.: Chroma Hash - Secure visualization of password field input
Chroma Hash - Secure visualization of password field input Chroma-Hash allows you to quickly compare the contents of two secure text fields. It’s common for a signup flow to ask you to type your password twice (to make sure you didn’t mistype it). With this visualization, a user can instantly check to see if what he/she typed was the same each time, without having to submit the form. Demo link.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本のサイトで使用しているサーチボックスのサイズとボタンの一覧
[CSS]フォームの新規開発と既存カスタマイズ用のフレームワーク -Formee
フォームのテキストエリアをより使いやすくするテクニック集
http://www.designwalker.com/2010/06/jquery-forms.html
フォームを簡単にデザインできるCSSフレームワーク「Formee」 | Web活メモ帳
