電話番号フォーム入力の複数フィールドと単一フィールドのキャプチャ
電話番号を扱うフォームで作業して、ユーザー入力をキャプチャする2つの方法を見てきました。
過去の慣例では、例2（下の画像）はフォームの電話番号の長さを制御するのに効果的であることが証明されています。
ただし、レスポンシブを念頭に置くと、例1はフォームでより一般的なパターンと見なされます。両方のパターンを調査した結果、以下のことがわかりました。
例1
長所
- 1つの入力=モバイルデバイスでのタップが少ない
- 1入力=コーディングが少ない
短所
- 電話番号の形式（1-555-555-5555、+ 22444455555など）を制御するのが難しい場合があります
例2
長所
- 電話フォーマットの制御が簡単
- ユーザーエラーの削減
短所
- 3つの入力=モバイルデバイスでのタップ数の増加
- より多くの入力=より多くのコーディング
どちらの入力にも長所と短所があり、レスポンシブ環境で最高のユーザーエクスペリエンスを提供する方法はそうではありません。誰かが洞察を共有したり、電話番号入力を使用するより良い方法を提供したりできますか？
人が自分の電話で実際の電話番号をダイヤルするとき、彼らは_1-555-555-555_と入力しますか、それとも_15555555555_と入力しますか？
固定フォーマットを強制する唯一の理由は、バックエンドが必要なフォーマットを決定できないためです。これは実装上の問題であり、エンドユーザーに技術的な問題がないことを強いています。これは"電話番号を目的の形式に解析することができないため、目的の形式を入力するように求めます"のようなものです。
クレジットカード番号の場合と同じように、4つの個別のフィールドに_1111_-_1111_-_1111_-_1111_を入力してvisaを選択することはほとんどありません。クレジットカードの文字列自体にすでにカードの種類を知るのに十分な情報があり、バックエンドでそれが必要な場合は、単一の数値_1111111111111111_を4つの「チャンク」に簡単に分割できるため、ドロップダウンから。
ロジック自体に何らかのインテリジェンスを設定するようにしてください。たとえば、その人の出身国がわかっている場合は、電話番号の形式がわかります。それが固定電話ではなく携帯電話であることがわかっている場合は、それを使用する別の手がかりになります。次に、ユーザーに1つのフィールドを与え、好きなように数字を入力させます。
ヘック、単一のフィールドを使用して+44 (020) 444 4444を自分で入力したい人もいるでしょう。しかし、プログラムで不要な文字とスペースをすべて取り除き、単一のフィールドとして保存できるはずです。
ユーザーではなく、プログラミングが大した仕事をするようにしましょう。
単一の入力フィールドは、電話番号、姓名、社会保障番号、または「パーツ」に分割されていると考えられるその他の値のいずれであっても、常にユーザーにとって最も簡単です。 Luke Wroblewskiが 多数記事 についてこれをバックアップするための大量のデータとともに書いています。
データベースではなく、ユーザー用にページを設計します。格納する前に電話番号を分割する必要がある場合は（国際プレフィックス、市外局番、交換、郵便番号）、そうするように試みますが、ユーザーに確認してください。
たとえば、ユーザーが5551234567控えめに確認を促すことができます(555) 123-4567 正しい。間違いを修正する方法と、推測が間違っていた理由を明確にする方法を必ず提供してください（たとえば、米国の電話番号ではない可能性があるため、国を指定してもらいます）。
受け入れる内容に寛大であること—ユーザーが国際的なプレフィックスにプラス記号を使用できるようにし（そしてそれをアルゴリズムで使用できるようにします）、必要と思われる他の句読点も含めます。誰もが独自のフォーマットのスタイルを持っています。
1つの入力フィールドを保持することをお勧めしますが、テキストにはマスクを使用します。 
-HTML5（Webアプリで作業している場合）のプレースホルダー属性を使用して、サンプル番号を表示できます。
これに対する私の指針となる原則は、ユーザーに対して次のとおりです。
- 彼らにあなたが期待することを見せてください
- 彼らがあなたに与えるものを何でも取りなさい
- あなたが取っているものを彼らに見せてください
HTML5とjQueryで3つすべてを達成するための最良の方法は、借用することです このプラグイン 。
主にモバイルユーザーにキーボードではなくキーパッドを提供するために_type="tel"_を追加し、予想される形式を表示するための優れた方法としてplaceholder="(999) 999-9999"を追加しました。 placeholderを省略した場合、またはこのフィールドにフォーカスが置かれた場合、ユーザーには次のように表示されます。
この時点で、ユーザーは好きな数字を入力または貼り付けて、うまく入力できます。他の文字を入力または貼り付けようとしても、無視されます。その結果、見栄えの良い数字が得られ、ユーザーとシステムにとってわかりやすく、認識しやすくなります。
国際的な可能性をカバーしたい場合は、まずユーザーの国を尋ね、次にフォームロジックを使用して、その国用にカスタマイズしたフィールドを表示します（jQueryで正規表現/定義を調整します）。
私のテストから、電話番号（またはクレジットカード、またはその他のマルチパートフィールド）を表すために単一の空のフィールドを使用することは絶対にありません。私は、ユーザーが長い数字を1つ入力するときに間違いを犯し、その間違いを見つけられないことをよく見てきました。マルチパートフィールドを使用すると、間違いを簡単に特定できます（「ああ、2番目のフィールドの最初の数字が間違っている！」）。ユーザーは、マルチパート番号をマルチパート番号として入力することにも慣れています。あなたの電話サービスプロバイダーはあなたの番号が10982859205であることをあなたに伝えません、彼らはあなたの番号が1（098）285-9205であることをあなたに伝えます。人が自分の番号を別の人に話すとき、彼らはそれをすべて1つの番号として話さない。書かれているとおりに解散します。クレジットカードから数字を読み取るとき、それは1つの巨大な数字として書き込まれません。 4つの数字のかたまりとして書かれています。ユーザーはそれに慣れており、JonWの答えに従うと、テストはひどくなります。
定型入力について説明する回答はすでにたくさんありますが、これはおそらく最良/最も簡単な解決策ですが、よくコーディングされたマルチフィールドソリューションのテストもよく見ています。 「適切にコード化された」とは、値を正しくコピーして貼り付け、入力時に自動的に次のフィールドにジャンプし（モバイルデバイスをタップする必要がなくなる）、ユーザーがバックスペースを押したときに自動的に逆ジャンプするフィールドを意味します。マルチフィールドソリューションは機能しますが、「より多くの入力=より多くのコーディング」についてのあなたのポイントは、まさにお金です。
このフォームは米国のユーザーのみに使用するように指定されているので、ユーザーを特定のフォーマットに誘導することに問題はありません。ただし、複数のテキストフィールドを使用することは、そのための最良の方法ではない場合があります。例として、いくつかの既存のWebサイトを調べてみましょう。
Papa John's Pizza は、アカウントの作成に複数のフィールドを使用します。ユーザーが入力すると、自動的に次のフィールドに切り替わります。これは、ユーザーが複数回クリックしたりタブしたりする必要がないため便利ですが、ユーザーが期待していないと混乱する可能性があります。ユーザーがタイプミスした場合、別のセクションに戻って修正するのは簡単ではありません。
Jimmy John's は、検証付きの単一のフィールドを使用して、ユーザーが実際の電話番号を入力することを確認します。これにより、ユーザーは確実に目的のフォーマットを入力できますが、この作業を行うためのコーディングは難しい場合があります。さらに、エラーが発生した場合、ユーザーがそれを見つけるのが難しい場合があります。
Pizza Hut は、テキストマスクを持つ単一のフィールドを使用します。これにより、形式を指定しながら、すべての数値を一度に入力できます。これにより、ユーザーがフィールドに入力しすぎる、または入力しすぎることが防止され、エラーが発生した場所を簡単に特定できます。私はそれが好きです。 （Dominoは同じタイプの入力フィールドを使用することに注意してください。ただし、相互にコピーしただけの可能性があります。）
例1に進みます。電話番号の1つのフィールド。
ユーザーが入力した番号に対してクライアント側の簡単な正規表現を実行し、悪質なエラーを考慮して、800桁のエントリや文字化けしたテキストに対するサーバーへの不要な呼び出しを保存します。
最終的には、サーバー上のWebフォームデータを検証し、データベースにドロップする前にサニタイズします。
市外局番などを使用してデータを照合したり電話番号を分類したりする場合は、前述のように純粋に応答性の高い観点から使いやすさを考慮して、オプション1を選択します。
あなたが望む最後のことは、モバイルまたはデバイスで別々の入力スタックにその数があることですが、これは完全な災害ではありませんが、あまりにも多くのクリックがあると、エンドユーザーの流動性が低下します。
かっことプラス記号も考慮に入れる必要がありますが、区別しないでください:)
オプション1. +定型入力
定型入力（ このタイプ、パスワードフィールドではない ）を使用すると、ユーザーは番号を（たとえば、ダイヤルする場合と同じように）一度に入力できますが、送信前に番号をフォーマットできます。
これにより、肉体的な労力（次の入力に移動する）と精神的な労力（次の入力に移動するタスクへの数とコンテキストの切り替えを分割する）が削減されます。一般的な使用例）参照 この答え
_01234 456 789_などの形式のスペースを入力するか、ユーザーが省略できるという点で柔軟性があります。
国際内線番号も入力する必要がある場合は、次のいずれかを実行します。
- フォームでそれを明確にして、ユーザーが正しい番号を入力できるようにします
（例：_+nn nnnn nnn nnn_-定型入力に既に+がある
または+nn (n)nnnn nnn nnn） - 別の郡-コードフィールドを用意して、「ローカル」番号を入力できるようにします。通常はその数に含まれないものとして、それを別のエンティティとして持つことはユーザーにとって不便ではありません。