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

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

Sam Dutton

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

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

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

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

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

注: <input> 要素に終了タグがありません。これは、これらの要素が void（空の）要素であり、コンテンツを持たないためです。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>

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

デフォルトのスタイルは問題ないか？フォームの外観を改善するには、何を変更すればよいですか。
デフォルトのスタイルは機能しますか？フォームをそのまま使用すると、どのような問題が発生する可能性がありますか？モバイルではどうでしょうかスクリーンリーダーなどの支援技術についてはどうですか？
どのようなユーザーがどのようなユーザーで、どのようなデバイスやブラウザをターゲットとしていますか？

フォームをテストする

多くのハードウェアを入手してデバイスラボをセットアップすることもできますが、さまざまなブラウザ、プラットフォーム、デバイスでフォームを低コストで簡単に試すことができます。

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

[View App] をクリックして登録フォームをプレビューします。

Chrome DevTools のデバイスモードを使用して、さまざまなデバイスでフォームをテストします。
スマートフォンまたは他の実際のデバイスでフォームを開いてください。どのような違いが見られますか？

ステップ 2: CSS を追加してフォームの利便性を高める

[View Source] をクリックしてソースコードに戻ります。

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

このステップでは、CSS を追加してフォームを使いやすくします。

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

[View App] をクリックすると、スタイル設定された登録フォームが表示されます。[View Source] をクリックして css/main.css に戻ります。

この CSS はさまざまなブラウザや画面サイズで機能しますか？
テストデバイスに合わせて padding、margin、font-size を調整してみてください。
CSS はモバイルファーストです。メディアクエリは、幅が 400px 以上のビューポートと、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" では基本的な検証を行い、モバイルユーザーに適切なキーボードが表示されるようにします。ぜひお試しください。

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

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

[Full name] 入力に autocomplete 値 name を使用することは理にかなっていますが、他の入力についてはどうでしょうか。 * [メール] に autocomplete="username" を指定すると、ブラウザのパスワードマネージャーが、このユーザー名（ユーザー名）の「名前」としてメールアドレスを保存し、パスワードと一緒に使用することを意味します。* パスワードの autocomplete="new-password" は、現在のサイトのパスワードとしてこの値を保存するかどうかを求めるパスワードマネージャーへのヒントです。その後、autocomplete="current-password" を使用して、ログインフォームの自動入力を有効にできます（これはsign-upフォームです）。

ステップ 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 では、以下の重要な機能については説明しません。

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