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

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

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

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

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

index.html にあるフォームの HTML を確認します。名前、メールアドレス、 確認します。それぞれがセクションに含まれ、それぞれにラベルが付いています。[登録] ボタンが <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>

[View App] をクリックすると、登録フォームをプレビューできます。こちらは、 ブラウザのデフォルトのスタイル

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

フォームをテストする

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

で確認できます。

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

  • Chrome DevTools のデバイスモードを使用して、さまざまなデバイスでフォームを試します。
  • 次に、スマートフォンまたは他の実際のデバイスでフォームを開きます。どのような違いがあるでしょうか?

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

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

ここまでの HTML には問題はありませんが、フォームが特定の環境に適した 幅広くリーチできます

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

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

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

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

  • テストデバイスに合わせて paddingmarginfont-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 では、以下の重要な機能は扱いません。

  • 不正使用されたパスワードがないか確認します。不正使用されたパスワードは決して許可しないでください。 不正使用されたパスワードは、パスワード チェック サービスを使用して検出できます(また、そのように指定してください)。 既存のサービスを使用することも、独自のサーバーで独自のサービスを実行することもできます。実際に試して、パスワードを追加 確認しています

  • 利用規約とプライバシー ポリシーに関するドキュメントへのリンク: 保護する必要があります。

  • スタイルとブランディング: これらがサイトの他の部分とマッチするようにします。名前と住所の入力時 支払いを行うときも、ユーザーは安心し、その場にいると安心する必要があります。

  • 分析と実際のユーザーのモニタリング: フォームのデザインのパフォーマンスとユーザビリティを、実際のユーザーを対象にテスト、モニタリングできます。