このページは Cloud Translation API によって翻訳されました。

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

Sam Dutton

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

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

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

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

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

注: <input> 要素には閉じタグがありません。これは、これらの要素がvoid（空）要素であり、それ自体にコンテンツがないためです。空要素の末尾にある「/」文字は省略可能です。<input> または <input /> のいずれかを使用できます。

<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 が適用されていないフォームの外観を示しています。

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

フォームをテストする

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

Chrome DevTools の Device Mode を使用して、モバイルデバイスをシミュレートします。
パソコンからスマートフォンに URL を送信します。
BrowserStack などのサービスを使用して、さまざまなデバイスとブラウザでテストします。
ChromeVox Chrome 拡張機能などのスクリーンリーダーツールを使用してフォームを試します。

[アプリを表示] をクリックして、登録フォームをプレビューします。

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" は基本的な検証を行い、モバイルユーザーに適切なキーボードが表示されるようにします。ぜひお試しください。

[アプリを表示] をクリックし、[メール] ラベルをクリックします。どうなるでしょうか。ラベルの for 値がメール入力の id と一致するため、メール入力にフォーカスが移動します。他のラベルと入力も同様に機能します。スクリーンリーダーは、ラベル（またはラベルに関連付けられた入力）にフォーカスが当たると、ラベルのテキストも読み上げます。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 では、次のような重要な機能は取り上げません。

不正使用されたパスワードがないか確認します。不正使用されたパスワードは使用しないでください。パスワードチェックサービスを使用して、不正使用されたパスワードを検出できます（また、そうすべきです）。既存のサービスを使用するか、独自のサーバーでサービスを実行できます。実際に試して、フォームにパスワードの確認を追加します。
利用規約とプライバシーポリシーのドキュメントへのリンク: ユーザーデータの保護方法をユーザーに明確に示します。
スタイルとブランディング: サイトの他の部分と一致するようにします。名前と住所を入力して支払いを行う際、ユーザーは、自分が正しい場所にいると信頼して安心できる必要があります。
アナリティクスとリアルユーザーモニタリング: フォームのデザインのパフォーマンスとユーザビリティを実際のユーザーでテストしてモニタリングできます。