使用跨平台浏览器功能构建登录表单

Sam Dutton

此代码实验室教您如何构建安全、易访问且易于使用的登录表单。

1. 使用有意义的 HTML

使用这些为工作而构建的元素

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

您将看到，这些元素启用内置浏览器功能，提高可访问性，并为您的标记添加含义。

  1. 点击 Remix to edit 使项目可编辑。

  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. 点击 View App 以预览您的登录表单。您添加的 HTML 是有效且正确的，但默认的浏览器样式使其看起来很糟糕且难以使用，尤其是在移动设备上。

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

2. 为手指和拇指设计

调整内边距、外边距和字体大小，以确保您的输入在移动设备上也能良好工作。

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

  2. 点击 View App 以查看您新近样式的登录表单。

  3. 点击 View Source 返回您的 style.css 文件。

这真是相当多的代码！需要注意的主要事项是尺寸的变化

  • padding 和 margin 被添加到输入中。
  • font-size 对于移动设备和桌面设备是不同的。

:invalid 选择器用于指示输入何时具有无效值。这目前尚不起作用。

CSS 布局是移动优先的

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

当像这样构建您自己的表单时，在此过程中的这一点非常重要，需要在桌面设备和移动设备上的真实设备上测试您的代码

  • 标签和输入文本是否可读，特别是对于视力低下的人？
  • 输入框和 Sign in 按钮是否足够大，可以用作拇指的触摸目标？

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. 再次查看您的应用，然后点击 Email。

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

  3. 在移动设备上聚焦电子邮件输入框。

    请注意键盘如何针对键入电子邮件地址进行优化。例如，@ 和 . 字符可能会显示在主键盘上，并且操作系统可能会在键盘上方显示存储的电子邮件。所有这些都是因为 type="email" 属性应用于 <input> 元素。

    The default email keyboard on iOS.

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

    默认情况下文本是隐藏的，因为 type="password" 属性已应用于该元素。

  • autocomplete、name、id 和 type 属性帮助浏览器理解输入框的角色，以便存储稍后可用于自动填充的数据。
  1. 在桌面设备上聚焦电子邮件输入框并键入一些文本。当您点击 Fullscreen The Fullscreen icon 时，您可以看到您的应用的 URL。如果您在浏览器中存储了任何电子邮件地址，您可能会看到一个对话框，让您从中选择这些存储的电子邮件。这是因为应用于电子邮件输入框的 autocomplete="username" 属性。
  • autocomplete="username" 和 autocomplete="current-password" 帮助浏览器使用存储的值自动填充输入框。

不同的浏览器使用 不同的技术 来确定表单输入框的角色，并为各种不同的网站提供自动填充。

添加和删除属性以自行尝试。

跨平台测试行为极其重要。您应该在不同设备上的不同浏览器中输入值并提交表单。使用 BrowserStack 在各种平台上进行测试很容易，BrowserStack 对于 开源项目是免费的。试试看！

这是您的 index.html 文件此时应有的外观

4. 添加 UI 以切换密码显示

可用性专家 强烈建议 添加一个图标或按钮，让用户可以看到他们在 Password 字段中输入的文本。 没有内置方法可以做到这一点，因此您需要使用 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;
}

    这使 Show password 按钮看起来像纯文本，并将其显示在密码部分的右上角。

  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. 点击 Show password。

  5. 在不同操作系统上的多个浏览器上重复第四步。

考虑 UX 设计：用户会注意到 Show password 并理解它吗？是否有更好的方法来提供此功能？现在是尝试与一小群朋友或同事进行 折扣可用性测试 的好时机。

要了解此功能如何为屏幕阅读器工作，请安装 ChromeVox Classic Extension 并浏览表单。 aria-label 值是否按预期工作？

某些网站（例如 Gmail）使用图标而不是文本来切换密码显示。完成此代码实验室后，使用 SVG 图像实现此功能。 Material Design 提供您可以免费下载的高质量图标。

这是您的代码此时应有的外观

5. 添加表单验证

当您让用户在提交表单之前验证他们的数据，并向他们展示他们需要更改的内容时，您可以帮助用户正确输入他们的数据。

HTML 表单元素和属性具有用于基本验证的内置功能，但您还应该使用 JavaScript 在用户输入数据以及他们尝试提交表单时执行更强大的验证。

此步骤使用 约束验证 API（广泛支持）添加自定义验证，并使用内置浏览器 UI 设置焦点并显示提示。

告诉用户密码和任何其他输入的约束。不要让他们猜测！

  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. 输入有效的电子邮件地址，但然后在没有密码值的情况下点击 Sign in。浏览器会警告您错过了必填值，并将焦点设置在密码输入框上。

    3. 输入无效密码，然后点击 Sign in。现在您会看到不同的消息，具体取决于哪里出了问题。

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

    这是您的代码此时应有的外观

更进一步

它们未在此代码实验室中显示，但您仍然需要以下四个关键的登录表单功能

  • 添加 Forgot your password? 按钮，使用户可以轻松重置密码。

  • 链接到您的服务条款和隐私政策文档，以便您的用户了解您如何保护他们的数据。

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

  • 添加 分析和 RUM，以便您可以测试和监控表单设计的性能和可用性。