ログインフォームとサインアップフォームを一体化するテクニック – creamu
Leah Culver’s Blogで、ログインフォームとサインアップフォームを一体化するテクニックが紹介されています。 ↑の画像を見てもらうとわかるんですが、 メールアドレス（ユーザー名）とパスワードは共通 「I have an account」にチェックを入れると「Log in」ボタンに切り替わり、パスワード忘れのリンクを表示 「I’m new!」にチェックを入れると「Sign up!」ボタンに切り替わり、利用規約へのリンクを表示 といった仕組みになっています。 ログインフォームとサインアップフォームを分けなくていいので、シンプルで使いやすそうですね。 参考に、HurlとAmazonの例が載っています。見てみると、確かにAmazonもこういうインターフェースになっていることに気づきますね。 フォーム作成の参考にしてみてはいかがでしょうか？ Log in or sign up? 昨日はま
使いやすいフォームを実装するための10のポイント | コリス
ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌
長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図１：長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図２：ウィザード形式（Step1〜Step3） チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)
CSSとJavaScriptで作るフォームエレメントのチュートリアル51 – creamu
1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C
今すぐに使えるリアルタイム入力チェックライブラリ·Vanadium MOONGIFT
Webフォームから飛んできた値について、入力チェックを行わないということはまずないだろう。数字のところに文字列が入ったり、必須のものが入っていなかったりすることはよくある。だからこそサーバサイドのプログラムでチェックはするのだが、ユーザビリティを考えるとクライアントサイドでも入力チェックを行いたい。 リアルタイムで行われる入力チェック 入力チェックのJavaScriptを作る、なんていうと面倒な感じがするがVanadiumを使えば開発者の方でなくともチェック機能が実装できてしまう。 今回紹介するオープンソース・ソフトウェアはVanadium、jQueryを使ったクライアントサイド入力チェックライブラリだ。 Vanadiumは入力項目のクラスでチェック内容を指定するようになっている。そのためVanadiumさえ読み込めば、HTMLを変更するだけで入力チェックが実装できるようになる。入力必須や
[JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea
テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。
「行列のできる入力フォーム」、ポイントは4つのおもてなし
入力フォームに対してもっと企業は「おもてなし精神」を持つべきだ――と言いたい。せっかくカッコいいWebサイトでも入力フォームがそっけなければ客は離脱してしまう。デルのサイトを参考に、行列のできる入力フォームを考えてみよう。 わたしの会社では、いくつかWebマーケティングの改善サービスを行っている。中でも「フォームアシスト」と呼ばれる入力フォームの改善サービスは、国内でいち早くスタートしたこともあり、ライセンス数350を超える主力商品だ。 フォームアシストは今どきのSaaSというかASP型の期間レンタルサービスで、顧客の持っている資料請求ページや購入ページの離脱を改善することを目的にした商品である。当社のコンサル曰く、「平均で9.45％の離脱改善効果が出ている」というのだから、理論上は集客が増えなくても売上10％向上につながる費用対効果抜群のサービスだ（ちょっと自画自賛しすぎかも）。 ちなみ
シンプルなActionScript3で出来たコンタクトフォーム:phpspot開発日誌
Simple AS3 Contact Form Using PHP - Flashtuts+ シンプルなActionScript3で出来たコンタクトフォームのソースが公開されています サーバ側はPHPで出来ています。 仮に、ActionScript3 でフォームを書くことになった場合もこのサンプルがあれば素早く作成できますね。 HTMLで作るのと違って、かなり柔軟なフォームデザインや機能を盛り込むことも可能なのでユーザビリティ向上にもよいのかも。 関連エントリ Actionscriptで書かれた物理エンジンライブラリ「jiglibflash」 3D、ゲーム、物理エンジン、トゥイーンなど、ActionScript3用便利ライブラリ集
穴埋め式のユーザー登録画面 | SIMPLE*SIMPLE
ちょっと素敵。穴埋めの試験に答えるようにユーザー登録ができます。 ↑ 「ユーザー名はこれで、パスワードはこれ、ちなみに私の名前は・・」なんて具合です。 実際に動作している様子は以下からどうぞ。 » Sign up on Huffduffer
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PHPで確認メール付きのユーザー登録フォームを作るチュートリアル – creamu