Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

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

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

Sam Dutton

安全でアクセスしやすく、使いやすい登録フォームを作成する方法について説明します。最終的なフォームは CodePen で確認できます。

1. 意味のある HTML を使用する

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

新しいペンを作成する。

次のコードをコピーして HTML エディタに貼り付けます。

<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>

ライブプレビューをクリックすると、HTML フォームが表示されます。名前、メールアドレス、パスワードの入力欄があります。このフォームでは、デフォルトのブラウザ CSS のみが使用されています。

各入力はセクションにあり、それぞれにラベルが付いています。重要なのは、登録ボタンが <button> であることです。この Codelab の後半では、これらの要素の特別な機能について説明します。

次の質問に答えてみましょう。

デフォルトのスタイルは適切に表示されていますか？フォームの見栄えを良くするには、どのような変更を加えるべきでしょうか？
デフォルトのスタイルは機能していますか？このフォームをそのまま使用すると、どのような問題が発生する可能性がありますか？モバイルではどうですか？スクリーンリーダーやその他の支援技術の場合はどうなりますか？
対象ユーザー、対象デバイス、対象ブラウザ

フォームをテストする

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

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

CodePen のライブビューを開くか、こちらのライブビューにアクセスします。Chrome DevTools のデバイスモードを使用して、さまざまなデバイスでフォームをテストします。

スマートフォンなどの実機でフォームを開きます。どのような違いがありますか？

2. CSS を追加してフォームの動作を改善する

ここまでの HTML には問題はありませんが、モバイルとパソコンのさまざまなユーザーでフォームが正常に動作することを確認する必要があります。

このステップでは、フォームを使いやすくするために CSS を追加します。この CSS をコピーして css/main.css ファイルに貼り付けます。

プレビューをクリックして、スタイル設定された登録フォームを表示します。

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

テストデバイスに合わせて padding、margin、font-size を調整してみてください。
CSS はモバイルファーストです。メディアクエリを使用して、幅が 400px 以上のビューポートに CSS ルールを適用し、幅が 500px 以上のビューポートにもう一度適用します。これらのブレークポイントは適切ですか？フォームのブレークポイントはどのように選択すればよいですか？

3. ユーザーがデータを入力しやすくする属性を追加する

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

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 値があるため、フォーカスがメール入力に移動します。他のラベルと入力も同様に機能します。スクリーンリーダーは、ラベル（またはラベルに関連付けられた入力）にフォーカスが当たったときにもラベルテキストを読み上げます。

フィールドを空にしてフォームを送信してみます。ブラウザはフォームを送信せず、不足しているデータを入力するよう求めるメッセージを表示し、フォーカスを設定します。これは、すべての入力に 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

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

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

パスワード切り替えボタンを有効にして、パスワードの制約に関する情報をユーザーに表示するには、JavaScript をコピーして、JavaScript エディタに貼り付けます。

パスワードの表示を切り替えるテキストの代わりにアイコンを使用する方がよいでしょうか？少人数の友人や同僚で割引ユーザビリティテストを試してみてください。
スクリーンリーダーがフォームでどのように動作するかを確認するには、ChromeVox 拡張機能をインストールして、フォーム内を移動します。ChromeVox のみを使用してフォームに記入していただけますか？そうでない場合、どこを変更しますか？

さらに便利なサービス

この Codelab では、いくつかの重要な機能について説明しません。

不正使用されたパスワードがないか確認しています。不正使用されたパスワードは許可しないでください。パスワードチェックサービスを使用して、不正使用されたパスワードを検出することができます（また、そうすべきです）。
利用規約とプライバシーポリシーに関するドキュメントへのリンク。ユーザーのデータをどのように保護しているかを明確に説明します。
フォームのスタイルとブランドを更新して、サイトの他の部分と一致するようにします。これにより、ユーザーは名前や住所を入力する際、特に支払いを行う際に、正しい場所にいることを確認できます。
アナリティクスとリアルユーザーモニタリングを追加します。フォームデザインのパフォーマンスとユーザビリティをテストし、実際のユーザー向けにモニタリングできるようにします。