借助跨平台浏览器功能构建登录表单

萨姆·达顿

在此 Codelab 中，您将学习如何构建一个安全、无障碍且易于使用的登录表单。

1. 使用有意义的 HTML

请使用为作业构建的以下元素：

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

如您所见，这些元素可实现内置的浏览器功能、改进无障碍功能，并为标记添加含义。

  1. 点击“Remix”进行修改，使项目变为可修改状态。

  2. 将以下代码添加到 <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 文件应如下所示：

  3. 点击查看应用以预览登录表单。 您添加的 HTML 有效且正确，但默认的浏览器样式会导致其看起来非常糟糕且难以使用，尤其是在移动设备上。

  4. 点击 View Source 可返回源代码。

2. 针对手指和拇指进行设计

请调整内边距、外边距和字体大小，以确保您输入的内容在移动设备上顺畅运行。

  1. 复制以下 CSS 并将其粘贴到 style.css 文件中：

  2. 点击查看应用以查看新样式的登录表单。

  3. 点击 View Source 可返回到 style.css 文件。

编写了这么多代码，主要需要注意的是尺寸变更：

  • 将 padding 和 margin 添加到输入中。
  • 移动设备和桌面设备的 font-size 有所不同。

:invalid 选择器用于指明输入存在无效值的情况。这种方法目前还行不通。

CSS 布局是移动优先的布局：

  • 默认 CSS 适用于宽度小于 450 像素的视口。
  • 媒体查询部分会为宽度至少为 450 像素的视口设置替换值。

在构建这样自己的表单时，在此流程中，在桌面设备和移动设备的真实设备上测试代码非常重要：

  • 标签和输入文本是否可读（尤其是对于弱视人士）？
  • 输入内容和登录按钮是否足够大，可以用作拇指的触摸目标？

3. 添加输入属性以启用内置的浏览器功能

使浏览器能够存储和自动填充输入值，并提供对内置密码管理功能的访问权限。

  1. 向您的表单 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>

  2. 再次查看您的应用，然后点击电子邮件。

    请注意焦点是如何移动到电子邮件输入的。这是因为标签通过 for="email" 属性与输入相关联。当标签或标签的关联输入获得焦点时，屏幕阅读器还会读出标签文本。

  3. 将焦点置于移动设备上的电子邮件输入。

    请注意键盘针对电子邮件地址输入进行了优化。例如，@ 和 . 字符可能会显示在主键盘上，而操作系统可能会在键盘上方显示存储的电子邮件。之所以发生这一切，是因为将 type="email" 属性应用于 <input> 元素。

    iOS 设备上的默认电子邮件键盘。

  4. 在密码输入框中输入一些文本。

    默认情况下，文本处于隐藏状态，因为已对元素应用了 type="password" 属性。

  • autocomplete、name、id 和 type 属性可帮助浏览器了解输入源的作用，以便存储稍后可供自动填充的数据。
  1. 将焦点置于桌面设备上的电子邮件输入界面，然后输入一些文字。 当您点击 Fullscreen 图标 “全屏”图标 时，可以看到应用的网址。如果您在浏览器中存储了任何电子邮件地址，则可能会看到一个对话框，供您选择这些存储的电子邮件地址。之所以发生这种情况，是因为 autocomplete="username" 属性应用于电子邮件输入。
  • autocomplete="username" 和 autocomplete="current-password" 可帮助浏览器使用存储的值自动填充输入。

不同的浏览器使用不同的技术来确定表单输入的作用，并为一系列不同的网站提供自动填充功能。

添加和移除属性，即可自己尝试此操作。

测试跨平台的行为极为重要。您应输入相应值，然后在不同设备的不同浏览器中提交表单。您可以使用 BrowserStack（对开源项目免费）轻松地在各种平台上进行测试。试试看！

此时，您的 index.html 文件应如下所示：

4. 添加用于切换密码显示的界面

易用性专家强烈建议添加图标或按钮，以便用户查看他们在密码字段中输入的文字。没有内置实现方法，因此您需要使用 JavaScript 自行实现。

添加此功能的代码非常简单。此示例使用了文本，而不是图标。

更新 index.html、style.css 和 script.js 文件，如下所示。

  1. 在 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>

  2. 将以下 CSS 添加到 style.css 文件的底部：

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    这样一来，显示密码按钮就会以纯文本形式显示在密码部分的右上角。

  3. 将以下 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.');
  }
}

  4. 立即尝试显示密码逻辑。

    1. 查看您的应用。

    2. 在密码字段中输入一些文本。

    3. 点击显示密码。

  5. 针对不同操作系统的多个浏览器重复执行第 4 步。

想一想用户体验设计：用户是否会注意到“显示密码”并理解密码？是否有更好的方法提供此功能？这时，非常适合与一小群朋友或同事一起进行折扣易用性测试。

要了解此功能如何对屏幕阅读器发挥作用，请安装 ChromeVox Classic 扩展程序，然后浏览相应表单。aria-label 值是否按预期运行？

某些网站（例如 Gmail）使用图标（而非文字）来切换密码显示状态。完成此 Codelab 后，请使用 SVG 图片来实现。 Material Design 提供可供您免费下载的高品质图标。

此时，您的代码应如下所示：

5. 添加表单验证

如果您允许用户在表单提交前验证其数据，并向用户显示他们需要更改的内容，则可以帮助用户正确输入他们的数据。

HTML 表单元素和属性具有用于基本验证的内置功能，但您也应使用 JavaScript，在用户输入数据和尝试提交表单时进行更可靠的验证。

此步骤使用 Constraint Validation API（受到广泛支持），通过内置浏览器界面添加自定义验证，以便设置焦点并显示提示。

告知用户密码和任何其他输入方式的限制。不要让他们猜测！

  1. 更新 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>

这会添加两项新功能：

  • 有关密码限制的信息
  • 密码输入的 aria-describedby 属性（屏幕阅读器会读出标签文本、输入类型（密码）和说明。）

  1. 将以下 CSS 添加到 style.css 文件的底部：

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

  2. 将以下 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';
  }
}

  3. 试试看！

    所有最新的浏览器都内置了表单验证功能，并支持使用 JavaScript 进行验证。

    1. 输入无效的电子邮件地址，然后点击 Sign in（登录）。浏览器会显示警告——无需 JavaScript！

    2. 输入有效的电子邮件地址，然后点击登录（无需设置密码值）。浏览器会提醒您缺少必填值，并将焦点置于密码输入。

    3. 输入无效密码，然后点击登录。现在，系统会根据问题类型显示不同的消息。

  4. 尝试使用不同的方法帮助用户输入电子邮件地址和密码。更好的密码表单字段会提供一些智能建议。

    此时，您的代码应如下所示：

继续了解

本 Codelab 中并未显示这些功能，但您仍需要使用以下 4 项重要的登录表单功能：

  • 添加忘记了密码？，这是一个方便用户重置密码的按钮。

  • 提供指向服务条款和隐私权政策文档的链接，让用户了解您如何保护他们的数据。

  • 考虑样式和品牌，并确保这些附加功能与网站的其余部分相匹配。

  • 添加 Google Analytics（分析）和 RUM，以便测试和监控表单设计的性能和易用性。