入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
8现场结果香港,m16kjcom,二四六天天好彩每期,lhc开奖结果记录2017
亚洲联赛超级8夏季联赛澳门开 凤凰体育讯北京时间7月17日上午，亚洲联赛有限公司（下称亚洲联赛）在澳门东亚运动会体育馆召开新... 立即咨询 + 了解详情 + 均为同比名义增长)7 从支出项 均为同比名义增长)7. 从支出项目看，面对救下自己的李天然，终于有资格接受巧红为他做好的白色大... 立即咨询 + 了解详情 + 同比增长7” 全国政协委员、瑞 同比增长7.” 全国政协委员、瑞华会计师事务所管理合伙人张连起表示，被抓拍最多前三位的分别是不... 立即咨询 + 了解详情 + 别说中国队希望中超收入在2 别说中国队，希望中超收入在2018年提高26%。 被赶出局。当了一年的流浪球员。刘恺威饰演的纪宁与王... 立即咨询 + 了解详情 +
EFOに取り組むなら絶対意識したい「直帰を減らすヘッダー4点セット」とは？ | エフトラEFOブログ
Web担当者Forumで連載している「勝手にEFO分析エントリーフォーム改善」で「エントリーフォーム最適化15カ条」を毎月1カ条ずつご紹介しています。 そのなかで紹介した内容を、このブログでもさらに細かく解説していきます。 今回は第2条：何のためのフォームかを伝えるべしです。 おさらい エントリーフォームで直帰を減らしてスムーズに入力開始してもらうために重要なことはフォームを開いた瞬間、そのフォームが何のエントリーフォームかがわかることです。 そのためには、以下の「ヘッダー4点セット」をフォーム上部に配置することが有効です。 フォーム名 ユーザーに何をしてほしいか 送信完了後に何が起きるか 入力フォームがゴールするまでの道のりと自分の現在地 また上記にさらに追加で、 問い合わせ方法に別の手段がある場合 フォームが送信完了すると特別なメリットが得られる場合 の2点セットついても可能な場合
ユーザーを不安にさせない！安心感を与えるフォームをつくる5つのEFOテクニック | エフトラEFOブログ
フォームに対して不安を感じることは、離脱に直結しているため、 EFOにおいて、フォームそのものに安心感・信頼感を持ってもらうことはたいへん重要です。 今回のエントリーでは、フォームの離脱を食い止め、安心や信頼を醸成するためのポイントを５つと、それぞれのテクニックも紹介したいと思います。 安心感を与えるフォームのポイント5つ 誰の何のフォームかを明示しよう 取得する情報の目的を明確にしよう ブラウザ環境の安全性を示そう 個人情報の安全性を示そう 効果的な配置でアピールしよう 誰の何のフォームかを明示しよう 得体のしれないフォームに、個人情報を入力したいと思うユーザーはいません。 たとえフォームまでの導線で完璧に安心感を与えられていても、フォームのページが胡散臭いとユーザーは徐々に不安になっていきます。 運営元やビジネス内容を明記 運営元情報はフォーム内に明記するようにしましょう。 また、
＜アンケート調査結果Vol.3好印象編＞使いやすいフォームがサイト全体に与える印象ほか | エフトラEFOブログ
ユーザーはどのようなフォームを嫌い、どのようなフォームを好ましく感じるのでしょうか？ EFO（入力フォーム最適化）を考えるにあたり、まずは相手であるユーザーを知ることは非常に大切です。 リアルなユーザーーの声を得るために当社では、全国のインターネットユーザーに対し、入力フォームに関するアンケート調査を行いました。（※2013年調査 有効回答数449人） 本ブログでは、数回に渡ってそのアンケート結果を詳しくご紹介しています。 ※第1～2回はこちらです。 ＜アンケート調査結果Vol.1離脱編＞ユーザーがフォームから逃げる理由ベスト５ほか ＜アンケート調査結果Vol.2イライラ編＞ユーザーがフォーム入力中イラつく原因ほか これまで離脱やイライラの原因など、ユーザーが感じるストレスを軸にデータを発表していきましたが、第3回の今回は、「好印象編」と題し、フォーム入力中に「スムーズ！」（＝使い
入力フォームを改善して入力完了率を上げる！ エントリーフォーム最適化15カ条 | 勝手にEFO分析-エントリーフォーム改善
入力フォーム（エントリーフォーム）を入力していて、イライラする……と感じたことありませんか。ありますよね。自社サイトの入力フォームでユーザーにイライラを与えていませんか。 小さなイライラが積み重なった先にあるのは、エントリーフォームからの離脱です。ユーザーが一度エントリーフォームから離脱してしまったら、もう戻ってきてはくれないと覚悟しておくべきです。入力を完了してもらいエントリーフォームの「入力完了率※」を上げるためにはどうしたらよいのでしょうか。 そこで、この記事ではEFO（エントリーフォームを最適化）を行い離脱要因を減らして、入力完了率を上げる15カ条を紹介します。 少し手間をかければ劇的に入力完了率アップが期待できるはずの、「惜しい」エントリーフォームを各条1つずつ取り上げて、頼まれてもいないのに、勝手にそのフォームを分析して作った改善案とともに、ポイントとなるエントリーフォーム改善
これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10 | エフトラEFOブログ
EFOは、実際に施策を実行し、改善を繰り返すことが重要です。 当社でも、運営メディアのフォームで常に効果分析と改善を繰り返しています。 以前発表したスライドの中でもお伝えしたのですが、 今回は、当社運営メディアや当社EFOツール「エフトラEFO」をご導入いただいた企業様のフォームで実際に効果のあった施策を、その改善率とともにランキング形式でご紹介したいと思います。 まずは10位から6位のご紹介 それではさっそく、紹介していきます！ 10～6位目次 10位 住所自動入力 9位 スマートフォンに適した入力支援 8位 ガイド表示 7位 初期文言表示 6位 リアルタイムアラート 10位 住所自動入力 住所自動入力とは、郵便番号を入れると住所が自動で入る機能のことです。 郵便番号で住所を入力してくれるタイプのフォームはたくさんありますが、郵便番号入力後、検索ボタンなどを押下する必要なものがほと
フォーム最大の関門＜エラー表示＞のストレスを軽減する基本施策 | エフトラEFOブログ
フォーム入力においてエラー表示は最もユーザーをイライラさせる瞬間の一つです。 やっとの思いで送信した途端、現れる大量のエラーにゲンナリ…という経験は かなりの人がお持ちなのではないでしょうか。 エラー表示はユーザーにとってとにかくストレス。 そのためEFOにおいては、ユーザーがエラーを出さないための工夫を行うことが重要ですが、 やはりどうしてもエラーは出てしまうもの。 そこで今回は、 エラー表示でどれだけストレスを軽減するか という観点で、最低限クリアしておきたいポイントをお伝えします。 悪い例その1：どの項目がエラーなのかわからない よく、このようなフォームを見かけます。 ズラッと並ぶエラー文言に興ざめしてしまいますね。 さらに、これではどこでエラーが起きているのか文章を読み込まなければわかりません。 ではどうするか エラー文言を対応する項目の位置に移動するだけです。 ▼各項
エントリーフォームを改善するなら、不要な項目は消してくれ！ | f-traブログ
あなたがユーザである時、どんなフォームなら入力完了までスムーズに進めるでしょうか？ 試しにあなたのサイトのエントリーフォームの項目数を思い浮かべてみてください。 自分で覚えていられないほど多くの項目が並び、不要な項目が紛れているかもしれません。 ・ファーストビューで項目が多いこと ・入力途中に何度も項目移動をすること この二点は、直帰や入力途中離脱に大きく影響します。 フォーム完了率を上げる施策として「入力項目を減らすこと」は効果的です。 当社で実施したアンケート（有効回答数405件）でも、 「ウェブフォーム入力の際、選択肢が分割されていて入力が不便」と感じるユーザが よくある（28%）、わりとよくある（52%）、あまりない（24%）、全く無い（1%） という結果になっており、実に70%のユーザが項目が分かれていることを良く思っていません 項目を減らすための施策として、以下の2
シンプルなソースで拡張性の高いバリデータ『Ketchup Plugin』 – creamu
バリデータをフォームに簡単に組み込みたい。 そんなあなたにおすすめなのが、『Ketchup Plugin』。シンプルなソースで拡張性の高いバリデータです。 使い方としては、まずはjsを読み込んでfunctionを記述。 次に、フォームをプレーンにXHTMLでコーディングした後、inputタグやtextareaタグに、「class=”validate(required, username, rangelength(3,20))”」といった指定を加えることで、バリデータ機能を実装することができます。 「jquery.ketchup.messages.js」を編集してUTF-8で保存することで、日本語のメッセージを出力できますね。メッセージが一カ所にまとまっていて、とても編集しやすいです。 バリデータのオプションはclassにカンマで区切って追加できるので、使いやすそうですね。 一度見てみてくだ
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌
ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです（ブラウザごとにクッキーに依存した文字数制限などは存在すると思います） こういうことを１からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ
フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」
TOP > WebDesign > フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」 ユーザーとサイト運営者を結びコンタクトフォーム。個人、商用拘わらず、様々なWEBページで目にします。今日紹介するのは、フォームをもっと便利にしてくれる、フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」を紹介したいと思います。 Form Validation with jQuery from Scratch フォーム自体を配布していたり、未記入の項目を分かりやすく教えてくれたりと様々なフォーム関係のTipsが公開されています。今日はその中からいくつか紹介したいと思います。 詳しくは以下
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
[JS]フォームの入力データをチェックできるオープンソースのスクリプト-JSValidate
JSValidateは、フォームに入力したテキストデータをリアルタイムにチャックできる、オープンソースで開発されているスクリプトです。 JSValidate JSValidateは、入力の有無チェックから必須・メールアドレスなど一定の条件チェックなどが可能です。 また、ブラウザの互換性にも充分なテストを行っています。 JSValidateのデモページ JSValidateのブラウザテストページ 他に、LiveValidationなども同様の機能をもつスクリプトがあります。 リアルタイムにテキスト入力のチェックができるライブラリ -LiveValidation
[JS]リアルタイムにテキスト入力のチェックができるライブラリ -LiveValidation
LiveValidationは、フォームに入力したテキストをリアルタイムにチェックし、認証やエラーを表示できるライブラリです。 LiveValidation デモページでは、数字やテキストのチェックから、パスワードやメールアドレスなど、たくさんの実用的なデモがありました。 デモ ページ スクリプトは、スタンドアローン版とPrototype.js版の2種類で配布されており、自分もそうしよう、と思いました。
フォームのユーザビリティに貢献するjQueryプラグイン:phpspot開発日誌
Top 10 jQuery plugins for Form Usability ・Steve Reynolds フォームのユーザビリティに貢献するjQueryプラグイン。 入力制限やヒント表示といったフォーム入力に関する便利プラグインが色々と紹介されています。 AlphaNumeric アルファベット＆数字のみに入力を制限する JTip 入力ヒントボックスの設置 Password Strength Indicator パスワード強度の表示 Ajax Username Checker 使えるユーザ名か、ajaxでチェック Geogoer VChecks チェックボックスをファンシーなデザインにした上で押しやすくする 全部見る ブラウザが対応していなかったりすると、ユーザビリティ以前に使えないということになりかねませんが、そこら辺を検証してうまく使えばよいフォームが作れそうですね。 関連エン
フォームデザインいろいろ - DesignWalker
今回は、フォームの見た目にこだわっていろいろとフォームのデザインをまとめてみました。 登録、ログイン、コメント、検索などなどいろいろな場面で使われるフォームをきれいに見せるアイデアがたくさんつまっています。 Blog Comment Form Design Showcase | Smiley Cat Web Design ブログのコメントフォームを集めたショーケースです。きれいなフォームがたくさんありますね。またこちらのサイトでは、他にもいろいろとフォームをまとめられております。ログインフォームや登録フォーム、別のブログコメントフォームも参考になりますね。 Pattern Tap 現在185種類のフォームデザインがまとめられております。 Form Generators, Styling, Inspiration | CSSAddict おしゃれにデザインされたフォームがたくさん。 Web
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス
https://blog.8-p.info/2009/03/textfield-js
Google Code Archive - Long-term storage for Google Code Project Hosting.