Codelab: 登録フォームに関するおすすめの方法

Sam Dutton

この Codelab では、安全で、アクセスしやすく、使いやすい登録フォームを作成する方法について説明します。

ステップ 1: 意味のある HTML を使用する

このステップでは、フォーム要素を使用してブラウザの組み込み機能を最大限に活用する方法を学びます。

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。

index.html のフォームの HTML を確認します。名前、メールアドレス、パスワードの入力欄が表示されます。各項目はセクションに含まれ、ラベルが付けられています。[Sign up] ボタンは <button> です。 この Codelab の後半では、これらすべての要素の特別な機能について説明します。

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

[アプリを表示] をクリックして、登録フォームをプレビューします。フォームは、デフォルトのブラウザ スタイル以外の CSS なしで表示されます。

  • デフォルトのスタイルで問題ありませんか？フォームを見やすくするには、何を変更すべきですか。
  • デフォルトのスタイルは正常に動作しますか？フォームをそのまま使用すると、どのような問題が発生する可能性がありますか？モバイルの場合はどうなりますか？スクリーン リーダーやその他の支援技術についてはどうですか？
  • 対象ユーザーと、ターゲットとするデバイスとブラウザは？

フォームをテストする

多くのハードウェアを入手してデバイスラボをセットアップすることもできますが、さまざまなブラウザ、プラットフォーム、デバイスでフォームを試すためのより安価で簡単な方法がいくつかあります。

[View App] をクリックすると、登録フォームをプレビューできます。

  • Chrome DevTools の Device Mode を使用して、さまざまなデバイスでフォームを試します。
  • スマートフォンなどの実際のデバイスでフォームを開きます。違いは何ですか？

ステップ 2: CSS を追加してフォームの動作を改善する

[ソースを表示] をクリックして、ソースコードに戻ります。

ここまでの HTML には問題ありませんが、モバイルとパソコンのさまざまなユーザーに対してフォームが適切に機能することを確認する必要があります。

このステップでは、フォームの使い勝手を良くするために CSS を追加します。

次の CSS をすべてコピーして css/main.css ファイルに貼り付けます。

[アプリを表示] をクリックして、スタイル設定された登録フォームを表示します。次に、[ソースを表示] をクリックして css/main.css に戻ります。

  • この CSS は、さまざまなブラウザと画面サイズで機能しますか？

  • テストデバイスに合わせて padding、margin、font-size を調整してみてください。

  • CSS はモバイル ファーストです。メディアクエリは、幅が 400px 以上のビューポートに CSS ルールを適用するために使用されます。また、幅が 500px 以上のビューポートに CSS ルールを適用するために使用されます。これらのブレークポイントは適切ですか？フォームのブレークポイントはどのように選択すればよいですか？

ステップ 3: ユーザーがデータを入力しやすいように属性を追加する

このステップでは、入力要素に属性を追加して、ブラウザがフォーム フィールドの値を保存して自動入力し、データが欠落しているフィールドや無効なフィールドを警告できるようにします。

index.html ファイルを更新して、フォーム コードが次のようになります。

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type 値は多くの機能を実行します。type="password" は、入力時にテキストを非表示にし、ブラウザのパスワード マネージャーが強力なパスワードを提案できるようにします。* type="email" は基本的な検証を行い、モバイル ユーザーに適切なキーボードが表示されるようにします。ぜひお試しください。

[アプリを表示] をクリックし、[メール] ラベルをクリックします。どうなるでしょうか。ラベルにはメール入力の id と一致する for 値があるため、フォーカスはメール入力に移動します。他のラベルと入力も同様に機能します。また、ラベル（またはラベルに関連付けられた入力）がフォーカスされると、ラベルのテキストを読み上げます。ChromeVox 拡張機能を使用して試すことができます。

フィールドを空にしてフォームを送信してみてください。ブラウザはフォームを送信せず、不足しているデータを入力するよう求めるメッセージが表示され、フォーカスが設定されます。これは、すべての入力に require 属性を追加したためです。次に、8 文字未満のパスワードで送信してみてください。ブラウザは、パスワードの長さが十分でないと警告し、minlength="8" 属性が原因でパスワード入力にフォーカスを設定します。pattern（名前の入力に使用）や他の検証制約についても同じことが言えます。ブラウザはこれらすべてを自動的に行い、追加のコードは必要ありません。

[フルネーム] 入力に autocomplete 値 name を使用するのは理にかなっていますが、他の入力はどうでしょうか。* [メールアドレス] 入力の autocomplete="username" は、ブラウザのパスワード マネージャーが、このユーザーの「名前」（ユーザー名）としてメールアドレスを保存し、パスワードとともに保存することを意味します。* [Password] の autocomplete="new-password" は、この値を現在のサイトのパスワードとして保存することを提案する必要があることをパスワード マネージャーに示すヒントです。次に、autocomplete="current-password" を使用してログイン フォームで自動入力を有効にします（これは登録フォームです）。

ステップ 4: 安全なパスワードの入力をサポートする

フォームをそのまま使用した場合、パスワードの入力に問題はありましたか？

問題は 2 つあります。 * パスワードの値に制約があるかどうかを確認する方法がない。 * パスワードは表示されないため、正しいかどうかを確認できません。

ユーザーに推測させないでください。

index.html のパスワード セクションを次のコードで更新します。

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

これにより、ユーザーがパスワードを入力する際に役立つ新しい機能が追加されます。

  • パスワードの表示を切り替えるボタン（実際にはテキストのみ）。（ボタンの機能は JavaScript で追加します）。
  • パスワード切り替えボタンの aria-label 属性。
  • パスワード入力用の aria-describedby 属性。スクリーン リーダーは、ラベルテキスト、入力タイプ（パスワード）、説明を読み上げます。

パスワード切り替えボタンを有効にして、パスワードの制約に関する情報をユーザーに表示するには、以下の JavaScript をすべてコピーして、独自の js/main.js ファイルに貼り付けます。

（CSS はステップ 2 ですでに設定されています。パスワード切り替えボタンのスタイルと配置を確認してください）。

  • パスワードの表示を切り替えるには、テキストよりもアイコンを使用したほうがよいですか？少人数の友人や同僚と一緒に割引ユーザビリティ テストを試す。

  • スクリーン リーダーがフォームでどのように機能するかを確認するには、ChromeVox 拡張機能をインストールしてフォームを操作します。ChromeVox のみを使用してフォームに記入していただけますか？そうでない場合は、どこを変えればよいと思いますか。

この時点で、フォームは次のように表示されます。

詳細

この Codelab では、以下の重要な機能は扱いません。

  • 不正使用されたパスワードがないか確認します。不正使用されたパスワードは決して許可しないでください。 パスワード チェック サービスを使用して不正使用されたパスワードを検出できます（またそのようにする必要があります）。 既存のサービスを使用するか、独自のサーバーでサービスを実行できます。実際に試して、フォームにパスワードの確認を追加します。

  • 利用規約とプライバシー ポリシーのドキュメントへのリンク: ユーザーデータの保護方法をユーザーに明確に示します。

  • スタイルとブランディング: サイトの他の部分と一致するようにします。名前と住所を入力して支払いを行う際、ユーザーは、自分が正しい場所にいると信頼して安心できる必要があります。

  • アナリティクスとリアルユーザー モニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザーでテストしてモニタリングできます。