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

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

Sam Dutton

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

ステップ 1: わかりやすい HTML を使用する

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

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

index.html にあるフォームの HTML を確認します。名前、メールアドレス、確認します。それぞれ 1 つのセクションに含まれ、それぞれにラベルが付いています。[登録] ボタンは <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] をクリックすると、登録フォームをプレビューできます。こちらは、ブラウザのデフォルトのスタイル。

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

で確認できます。

フォームをテストする

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

Chrome DevTools のデバイスモードを使用するモバイルデバイスをシミュレートします。
パソコンから 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 以上のビューポートに CSS ルールを適用するために使用し、幅が 500px 以上のビューポート。これらのブレークポイントは適切か？フォームのブレークポイントはどのように選択すればよいですか。

で確認できます。

ステップ 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" の場合、ブラウザのパスワードマネージャーに「name」としてメールアドレスパスワードを入力します。 * パスワードの autocomplete="new-password" は、パスワードマネージャーへの現在のサイトのパスワードとしてこの値を保存することを提案します。その後、 autocomplete="current-password": ログインフォームの自動入力を有効にします（ お申し込みフォームをご覧ください）。

ステップ 4: ユーザーが安全なパスワードを入力できるようにサポートする

フォームをそのままの状態で、パスワード入力に何か問題はありましたか？

これには 2 つの問題があります。 * パスワードの値に制限があるかどうかを確認する方法はありません。 * パスワードが表示され、入力したパスワードが見えません。

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

index.html の password セクションを次のコードに更新します。

<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 では、以下の重要な機能は扱いません。

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