サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 フォーム検証とは何か 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが
If users ever need to sign in to your site, thengood sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designed sign-in forms get high bounce rates. Each bounce could mean a lost and disgruntled user—notjust a missed sign-in opportunity. Here is an example of asimple sign-in form that demonstrates all of the b
入力フォームがあって、Enterを押して入力したテキストをリストに追加したいとしましょう。↓こちらでお試しできます。 ここに追加されるよ こういう感じで実装できます。簡単ですね。 (() => { const list = document.querySelector("#list_1"); const input = document.querySelector("#input_1"); input.addEventListener("keydown", (e) => { if (e.key !== "Enter") { return; } e.preventDefault(); consttext = e.target.value; const li = document.createElement("li"); li.textContent =text; list.appendC
ブログやHPに問い合わせフォームを作る方法はいくつかあります。 無料で作る方法としておすすめなのは、Googleフォームを使うことです。 ※大分 ブロッサムホテルにて iPhone SE 追記： 2018年5月、次の記事を書きました。 お問い合わせフォーム作成の流れとポイント お問い合わせフォームは、 ・お問い合わせ ・仕事の依頼 を受けるために必須です。 ブログやHPに必ず設置しましょう。 お問い合わせフォームの流れ お問い合わせフォームは次のような流れです。 フォームに入力していただく ↓ こちらが入力を知る（メールで届く） ↓ 返信する メールを送っていただくよりも入力者の負担が少ないのが、お問い合わせフォームのメリットといえます。 メールだと、挨拶、宛名、文章など考えることが増えるので、極力フォームを使いましょう。 項目は最低限にする お問い合わせフォームの項目は必要最低限にすべき
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 Webやアプリ内のフォームは、ユーザーとの最も大切なやり取りの場の一つです。サービスへの登録や予約、フィードバック、決済処理など、ユーザーと企業間の取引を開始したり、ユーザーいにあらゆる情報を入力してもらうべく、様々なところで使われています。 ユーザーがいかに素早く正確に情報を入力し、求める情報を最後まで入力してくれるかはこのフォームの出来にかかっています。 この記事ではフォームのデザインにおいて、様々なテストやユーザーの声などから導き出された、実用的な施策を紹介します。 1. フォームは論理的に並べる フォームは対話そのものです。従って、普通の会話の様に、ユーザーとアプリの２者間でのコミュニケーションとして表現されるべきでしょう。 質問は直感的な順番にする。ユ
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しようGoogleChrome（デスクトッ
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
WebアプリケーションやHPなど作っていると、コンタクトフォームやログインフォームを作ることがありますよね。 フォーム系はメールアドレスの整合性だったり、必須入力のものなどその案件に応じてつけていくと思いますが、開発者によっては何も考えずにサーバーサイドでバリデーションをかけたり、整合性をチェックすることがあると思います。 色々ご批判を頂くかもしれませんが、僕個人的にはサーバーサイドで整合性をチェックしている時のレスポンスを待つ時間だったり、一瞬ページが再読み込みがされた時の一瞬ホワイトアウトする感じがあまり好きじゃありません。また、ネットが遅い環境下で、バリデーションに引っかかってしまった時のガッカリ感は半端ないです。（大げさ） 最近僕的にハマっているのが、スカイフォームです。 下記がデモ画像ですが、 Submitボタンを押すと、 背景色変更と共にうまい具合にバリデーションのチェックをし
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
1/18/2014そこそこユーザビリティの高いフォームを作った去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで”そこそこ”と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。フロントエンド実装だけです（サーバ側スクリプトは書いてません）CSSフレームワークとしてbootstrap3 を利用しています。 主な機能 入力必須箇所の強調、および入力検証 requ
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
ニーハオ！カヤックのHTMLファイ部のしんちゃんアル！中国出身の新卒です。 入社して二ヶ月になりますが、 日本語を一生懸命勉強しています。 よろしくお願いいたします。 さて、現在jsdo.itでは第二回HTML5実技コンテストを絶賛開催中！ こんどのお題は「思わず登録したくなる登録フォーム」です。Webサービスの制作においてついつい疎かにしがちな登録フォーム。 実はとても大事なものです！ 今日は、登録フォームをつくる際に気をつけるべきポイントを7つにまとめました。 これだけは欠かせない基本の要素6つ 登録と無関係の要素はなるべく表示しないように！ 聞きたいことは最小限にして不安にさせない OpenIDを利用して登録手続きを超簡単に！ バリデーションは色や動きでみせると効果的 登録のメリットを表示しましょう アドバイスに縛られないで、そのサイトの個性に適した手法を使いましょう！ これら一
Webディレクターとして名村晋治がプロジェクトマネージメントやディレクション業務に当たっている時に利用している問題解決の手法やツール、セミナー等で話をしている内容などWebディレクションに関する情報の紹介をしています。2005年より継続更新中。 先日ある案件で、フォーム周りの修正開発をしていたので、個人的に同様のフォームを次に作る時のメモとしてまとめたモノです。 久しぶりに真面目にブログのエントリーを書いた気がします。 フォームといえば「EFO(エントリーフォーム最適化)」が有名ですが、フロントエンド側でのEFOというよりは、HTMLを作る上での注意点とかサーバサイド側でのEFOだったりします。 フロント系は、EFOのASPとかも一杯あるので、まぁ・・・調べて下さい(笑) ってことで、すっごい長くなったので、目次から(笑) 目次 名前の「ふりがな」 メールアドレス 生年月日郵便番号 住所
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんりGoogleChrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには)GoogleChrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値をemail とか sname
【2014/12/26：追記】 この記事はGoogleの仕様変更などで内容が古くなっていたため、最新の情報で書き換えました。 リンク先の記事を参照してください。Googleドライブのフォーム機能からGoogle Apps Scriptを使ってメール自動返信2014年版 [C!]Googleドキュメントで簡単にWEBフォームを作成できる機能があるのですが、アンケートやお問い合わせフォームなどがすぐに作れるので個人でも仕事でも多様している人が多いのではないでしょうか。このフォーム機能、フォームからの送信内容はドキュメントのスプレッドシート（Excelライクな表）にまとまるのでそれを共有しておけば複数人でも管理することができます。ただ、問題があるとすれば送信内容によってはすぐに返信したいのにメール通知機能がついていないんですね（フォーム機能ができた初期にはメニューにあった気もするのですが…）
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
