この Codelab では、安全でアクセスしやすく、使いやすいログイン フォームを作成する方法について説明します。
1. 意味のある HTML を使用する
ジョブ用に構築された次の要素を使用します。
<form><section><label><button>
これから説明するように、これらの要素を使用すると、組み込みのブラウザ機能が有効になり、アクセシビリティが向上し、マークアップに意味を付加できます。
[Remix] をクリックしてプロジェクトを編集可能にします。
<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 は有効で適切ですが、デフォルトのブラウザ スタイルでは、特にモバイル デバイスでは、見た目が悪く使いにくくなっています。
[View Source] をクリックしてソースコードに戻ります。
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>アプリをもう一度表示し、[Email] をクリックします。
フォーカスがメール入力に移ります。これは、
for="email"属性を通じてラベルが入力に関連付けられているためです。また、ラベルまたはラベルに関連付けられた入力がフォーカスされると、スクリーン リーダーはラベルテキストを読み上げます。モバイル デバイスでのメール入力に集中する。
メールアドレスの入力用にキーボードがどのように最適化されているかに注目してください。たとえば、メイン キーボードに
@文字と.文字が表示され、オペレーティング システムによってキーボードの上部に保存済みのメールが表示されることがあります。これらはすべて、type="email"属性が<input>要素に適用されているために発生します。
パスワード欄にテキストを入力します。
type="password"属性が要素に適用されているため、テキストはデフォルトで非表示になっています。
autocomplete、name、id、typeの各属性は、後で自動入力に使用できるデータを保存するための入力の役割をブラウザが理解するのに役立ちます。
- デスクトップ デバイスでのメール入力にフォーカスしてテキストを入力します。
全画面表示アイコン
をクリックすると、アプリの URL が表示されます。ブラウザにメールアドレスを保存している場合は、保存したメールアドレスを選択できるダイアログが表示されます。これは、autocomplete="username"属性がメール入力に適用されたために発生します。
autocomplete="username"とautocomplete="current-password"を使用すると、ブラウザは保存された値を使用して入力を自動入力できます。
フォーム入力の役割を判断し、さまざまなウェブサイトで自動入力を提供する方法は、ブラウザごとにさまざまな手法です。
属性を追加、削除して、ご自身で試してみてください。
プラットフォーム間で動作をテストすることが非常に重要です。各種デバイスのさまざまなブラウザで、値を入力してフォームを送信する必要があります。オープンソース プロジェクトは無料の 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.'); } }パスワードを表示するロジックを今すぐお試しください。
- アプリを表示します。
- パスワード フィールドにテキストを入力します。
- [Show password]（パスワードを表示）をクリックします。
異なるオペレーティング システムの複数のブラウザで、4 つ目の手順を繰り返します。
UX デザインについて考える。ユーザーがパスワードを表示することに気付き、理解してくれるか？この機能を提供するよりよい方法はありますか？この機会に、少人数の友人や同僚で割引のユーザビリティ テストを試してください。
この機能がスクリーン リーダーでどのように動作するかを確認するには、ChromeVox Classic 拡張機能をインストールして、フォーム操作を進めてください。aria-label の値は意図したとおりに機能しますか？
一部のウェブサイト（Gmail など）では、パスワードの表示の切り替えにテキストではなくアイコンが使用されます。この Codelab を完了したら、SVG 画像を使用してこれを実装します。 マテリアル デザインでは、無料でダウンロードできる高品質なアイコンを提供しています。
この時点でのコードは次のようになります。
5. フォームの検証を追加する
フォーム送信前にユーザーにデータを検証し、変更が必要な点を示すことで、ユーザーがデータを正しく入力できるようになります。
HTML のフォーム要素と属性には基本的な検証機能が組み込まれていますが、ユーザーがデータを入力する際やフォームを送信しようとするときに、より確実な検証を行うために JavaScript を使用する必要があります。
このステップでは、Constraint Validation API（広くサポートされている）を使用して、フォーカスを設定してプロンプトを表示する組み込みのブラウザ UI によるカスタム検証を追加します。
パスワードやその他の入力の制約をユーザーに伝えます。勘に頼らないで！
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="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 による検証もサポートされています。
- 無効なメールアドレスを入力し、[ログイン] をクリックします。ブラウザに警告が表示されます。JavaScript は必要ありません。
- 有効なメールアドレスを入力し、パスワードの値なしで [ログイン] をクリックします。ブラウザは、必須の値が抜けていることを警告し、パスワードの入力をフォーカスするように設定します。
- 無効なパスワードを入力して [ログイン] をクリックします。問題の種類に応じて異なるメッセージが表示されます。
ユーザーがメールアドレスとパスワードを入力できるよう、さまざまな方法を試してください。パスワードのフォーム項目の改善により、便利な提案がいくつか提示されます。
この時点でのコードは次のようになります。
さらに便利なサービス
この Codelab では説明しませんが、ログイン フォームには次の 4 つの重要な機能が必要です。
[パスワードをお忘れの場合] を追加します。このボタンを使用すると、ユーザーが簡単にパスワードを再設定できます。
利用規約とプライバシー ポリシーのドキュメントへのリンクを用意して、ユーザーデータの保護方法をユーザーが把握できるようにします。
スタイルとブランディングを考慮し、これらの追加機能をウェブサイトの他の部分と調和させる。
アナリティクスと RUM を追加して、フォームデザインのパフォーマンスとユーザビリティをテスト、モニタリングできるようにします。