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

クロスプラットフォームのブラウザ機能を使用してログインフォームを作成する

Sam Dutton

この Codelab では、安全で、ユーザー補助に対応し、使いやすいログインフォームを作成する方法について説明します。

1. 有意な HTML を使用する

ジョブ用に作成された次の要素を使用します。

<form>
<section>
<label>
<button>

これらの要素を使用すると、ブラウザの組み込み機能を有効にしたり、ユーザー補助を改善したり、マークアップに意味を追加したりできます。

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

<body> 要素に次のコードを追加します。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

この時点で、index.html ファイルは次のようになります。

[アプリを表示] をクリックして、ログインフォームをプレビューします。追加した HTML は有効で正しいものですが、デフォルトのブラウザスタイル設定では、特にモバイルデバイスで、見栄えが悪く使いづらい状態になります。
[ソースを表示] をクリックして、ソースコードに戻ります。

2. 指と親指向けに設計する

パディング、マージン、フォントサイズを調整して、モバイルで入力が適切に機能するようにします。

次の CSS をコピーして style.css ファイルに貼り付けます。
[アプリを表示] をクリックして、スタイル設定を変更したログインフォームを表示します。
[View Source] をクリックして、style.css ファイルに戻ります。

かなりの量のコードになりましたが、主な変更点はサイズの変更です。

padding と margin が入力に追加されます。
font-size はモバイルとパソコンで異なります。

:invalid セレクタは、入力値が無効な場合に使用されます。現時点では機能しません。

CSS レイアウトはモバイルファーストです。

デフォルトの CSS は、幅が 450 ピクセル未満のビューポート用です。
メディアクエリセクションでは、幅が 450 ピクセル以上のビューポートのオーバーライドを設定します。

このように独自のフォームを作成する場合は、この時点でデスクトップとモバイルの実際のデバイスでコードをテストすることが非常に重要です。

ラベルと入力テキストは、特にロービジョンの方にとって読みやすいですか？
入力フィールドと [ログイン] ボタンは、親指のタップターゲットとして使用できる大きさですか？

3. 入力属性を追加してブラウザの組み込み機能を有効にする

ブラウザで入力値を保存して自動入力できるようにし、組み込みのパスワード管理機能にアクセスできるようにします。

フォームの HTML に属性を追加して、次のようにします。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

アプリをもう一度表示して、[メール] をクリックします。

フォーカスがメール入力に移動します。これは、ラベルが for="email" 属性を介して入力に関連付けられているためです。また、スクリーンリーダーは、ラベルまたはラベルに関連付けられた入力にフォーカスが当たると、ラベルテキストを読み上げます。
モバイルデバイスでメール入力にフォーカスを当てます。

メールアドレスの入力に最適化されたキーボードに注目してください。たとえば、@ 文字と . 文字がメインキーボードに表示され、オペレーティングシステムが保存されているメールをキーボードの上に表示する場合があります。これは、type="email" 属性が <input> 要素に適用されているためです。
パスワード入力欄にテキストを入力します。

要素に type="password" 属性が適用されているため、テキストはデフォルトで非表示になっています。

autocomplete、name、id、type 属性は、入力の役割をブラウザに理解させ、後で自動入力に使用できるデータを保存するのに役立ちます。

デスクトップデバイスでメール入力にフォーカスを当てて、テキストを入力します。アプリの URL は、[全画面表示] をクリックすると確認できます。ブラウザにメールアドレスを保存している場合は、保存したメールアドレスから選択できるダイアログが表示されます。これは、メール入力に autocomplete="username" 属性が適用されているためです。

autocomplete="username" と autocomplete="current-password" は、ブラウザが保存された値を使用して入力を自動入力するのに役立ちます。

注: メール入力の場合は autocomplete="username" を使用します。username は最新のブラウザのパスワードマネージャーで認識されるためです。type="email" を使用するべきですが、id="email" や name="email" を使用する場合もあります。

ブラウザによって、フォーム入力の役割を判断し、さまざまなウェブサイトで自動入力を提供する手法が異なります。

属性を追加または削除して、このことをご自身で確認してください。

プラットフォーム間で動作をテストすることが非常に重要です。値を入力してフォームを送信する際は、異なるデバイスの異なるブラウザを使用する必要があります。BrowserStack を使用すると、さまざまなプラットフォームで簡単にテストできます。これはオープンソースプロジェクトは無料です。試してみよう:

この時点で、index.html ファイルは次のようになります。

4. パスワードの表示を切り替える UI を追加

ユーザビリティの専門家は、ユーザーが [パスワード] フィールドに入力したテキストを確認できるようにするアイコンまたはボタンを追加することを強く推奨しています。これを実現する組み込みの方法はありません。そのため、JavaScript で自分で実装する必要があります。

この機能を追加するコードは簡単です。この例では、アイコンではなくテキストを使用しています。

index.html、style.css、script.js ファイルを次のように更新します。

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="current-password" required>
</section>

style.css ファイルの末尾に次の CSS を追加します。
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
これにより、[パスワードを表示] ボタンが書式なしテキストのようになり、パスワードセクションの右上に表示されます。

次の JavaScript を script.js ファイルに追加して、パスワードの表示を切り替え、適切な aria-label を設定します。

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

パスワードを表示するロジックを試してみましょう。
1. アプリを表示します。
2. パスワードフィールドにテキストを入力します。
3. [Show password]（パスワードを表示）をクリックします。
異なるオペレーティングシステムの複数のブラウザで、4 番目の手順を繰り返します。

UX デザインについて考えてみましょう。ユーザーは [パスワードを表示] に気づき、理解できるでしょうか。この機能を提供するより良い方法はありますか？このような状況では、少数の友人や同僚を対象に割引のユーザビリティテストを試してみることをおすすめします。

スクリーンリーダーでのこの機能の仕組みを確認するには、ChromeVox クラシック拡張機能をインストールしてフォームを操作します。aria-label 値は意図したとおりに動作していますか？

Gmail など、一部のウェブサイトでは、テキストではなくアイコンを使用してパスワードの表示を切り替えます。この Codelab を完了したら、SVG 画像を使用して実装します。マテリアルデザインには、無料でダウンロードできる高品質のアイコンが用意されています。

この時点で、コードは次のようになります。

5. フォームの検証を追加する

フォームの送信前にデータを検証し、変更が必要な項目をユーザーに示すことで、ユーザーがデータを正しく入力できるようにします。

HTML フォーム要素と属性には基本的な検証機能が組み込まれていますが、ユーザーがデータを入力している間やフォームの送信を試みた際に、JavaScript を使用してより堅牢な検証を行う必要があります。

このステップでは、Constraint Validation API（広くサポートされている）を使用して、フォーカスを設定しプロンプトを表示する組み込みのブラウザ UI でカスタム検証を追加します。

パスワードやその他の入力に対する制約をユーザーに伝えます。ユーザーに推測させないでください。

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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

これにより、2 つの新機能が追加されます。

パスワードの制約に関する情報
パスワード入力用の aria-describedby 属性（スクリーンリーダーは、ラベルテキスト、入力タイプ（パスワード）、説明を読み上げます）。

style.css ファイルの末尾に次の CSS を追加します。

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

次の JavaScript を script.js ファイルに追加します。

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

試してみましょう。

最新のブラウザにはすべて、フォーム検証機能が組み込まれており、JavaScript による検証がサポートされています。
1. 無効なメールアドレスを入力して [ログイン] をクリックします。ブラウザに警告が表示されます。JavaScript は必要ありません。
2. 有効なメールアドレスを入力し、パスワード値を入力せずに [ログイン] をクリックします。必須の値が入力されていないことを示す警告が表示され、パスワード入力にフォーカスが設定されます。
3. 無効なパスワードを入力し、[ログイン] をクリックします。問題の内容に応じて、さまざまなメッセージが表示されます。
ユーザーがメールアドレスとパスワードを入力しやすいように、さまざまな方法を試します。パスワードフォームフィールドの改善では、いくつかの賢い候補が提示されます。

この時点で、コードは次のようになります。

さらに便利なサービス

この Codelab では説明しませんが、ログインフォームには次の 4 つの重要な機能が必要です。

ユーザーがパスワードを簡単に再設定できる [パスワードを忘れた] ボタンを追加します。
利用規約とプライバシーポリシーのドキュメントへのリンクを記載して、ユーザーがデータの保護方法を把握できるようにします。
スタイルとブランディングを考慮し、これらの追加機能がウェブサイトの他の部分と一致するようにしてください。
アナリティクスと RUM を追加して、フォームの設計のパフォーマンスとユーザビリティをテストしてモニタリングします。

クロス プラットフォームのブラウザ機能を使用してログイン フォームを作成する

1. 有意な HTML を使用する

2. 指と親指向けに設計する

3. 入力属性を追加してブラウザの組み込み機能を有効にする

4. パスワードの表示を切り替える UI を追加

5. フォームの検証を追加する

さらに便利なサービス

クロスプラットフォームのブラウザ機能を使用してログインフォームを作成する