注册表单最佳实践 Codelab

Sam Dutton

此 Codelab 演示了如何构建安全、易访问且易于使用的注册表单。

步骤 1：使用有意义的 HTML

在此步骤中，您将学习如何使用表单元素，以充分利用内置浏览器功能。

  • 点击Remix to Edit（混合以编辑），使项目可编辑。

查看 index.html 中表单的 HTML。您将看到有用于姓名、电子邮件和密码的输入框。每个输入框都在一个 section 中，并且每个输入框都有一个标签。注册按钮是…一个 <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（查看应用）以预览您的注册表单。这将向您展示没有 CSS（除了 默认浏览器样式 之外）的表单是什么样子。

  • 默认样式看起来还可以吗？您会更改什么来使表单看起来更好？
  • 默认样式用起来还可以吗？按原样使用表单可能会遇到什么问题？在移动设备上呢？对于屏幕阅读器或其他辅助技术呢？
  • 您的用户是谁？您要定位哪些设备和浏览器？

测试您的表单

您可以购置大量硬件并建立一个 设备实验室，但还有更便宜、更简单的方法可以在各种浏览器、平台和设备上试用您的表单

点击 View App（查看应用）以预览您的注册表单。

  • 使用 Chrome DevTools 设备模式在不同的设备上试用您的表单。
  • 现在在手机或其他真实设备上打开表单。您看到了什么差异？

步骤 2：添加 CSS 以使表单更好地工作

点击 View Source（查看源代码）以返回到您的源代码。

到目前为止，HTML 没有任何问题，但是您需要确保您的表单在移动设备和桌面设备上都能为各种用户正常工作。

在此步骤中，您将添加 CSS 以使表单更易于使用。

将以下所有 CSS 复制并粘贴到 css/main.css 文件中

点击 View App（查看应用）以查看您的样式化注册表单。然后点击 View Source（查看源代码）以返回到 css/main.css。

  • 此 CSS 是否适用于各种浏览器和屏幕尺寸？

  • 尝试调整 padding、margin 和 font-size 以适合您的测试设备。

  • CSS 是移动优先的。媒体查询用于为视口宽度至少为 400px 的视口应用 CSS 规则，然后再次为视口宽度至少为 500px 的视口应用 CSS 规则。这些断点是否足够？您应该如何为表单选择断点？

步骤 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（电子邮件）标签。会发生什么？焦点移动到电子邮件输入框，因为标签的 for 值与电子邮件输入框的 id 匹配。其他标签和输入框的工作方式相同。当标签（或标签关联的输入框）获得焦点时，屏幕阅读器也会播报标签文本。您可以使用 ChromeVox 扩展程序来尝试一下。

尝试在字段为空的情况下提交表单。浏览器不会提交表单，并且会提示填写缺失的数据并设置焦点。这是因为您已将 require 属性添加到所有输入框。现在尝试提交密码少于八个字符的表单。浏览器会警告密码不够长，并由于 minlength="8" 属性而将焦点设置在密码输入框上。pattern（用于姓名输入框）和其他验证约束也是如此。浏览器会自动完成所有这些操作，而无需任何额外的代码。

对 Full name（全名）输入框使用 autocomplete 值 name 是有道理的，但其他输入框呢？* Email（电子邮件）输入框的 autocomplete="username" 意味着浏览器的密码管理器会将电子邮件地址存储为与密码一起使用的此用户的“名称”（用户名！）。* Password（密码）的 autocomplete="new-password" 是对密码管理器的提示，表明它应提供将此值存储为当前站点的密码。然后，您可以使用 autocomplete="current-password" 在登录表单中启用自动填充（请记住，这是注册表单）。

步骤 4：帮助用户输入安全密码

使用当前表单，您是否注意到密码输入框有任何问题？

有两个问题：* 无法知道密码值是否有约束。* 您看不到密码以检查是否输入正确。

不要让用户猜测！

使用以下代码更新 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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

这增加了新功能以帮助用户输入密码

  • 一个用于切换密码显示的按钮（实际上只是文本）。（按钮功能将通过 JavaScript 添加。）
  • 密码切换按钮的 aria-label 属性。
  • 密码输入框的 aria-describedby 属性。屏幕阅读器会读取标签文本、输入类型 (password)，然后读取说明。

要启用密码切换按钮并向用户显示有关密码约束的信息，请复制以下所有 JavaScript 并将其粘贴到您自己的 js/main.js 文件中。

（CSS 已从步骤 2 就位。查看一下，了解密码切换按钮是如何设置样式和定位的。）

  • 使用图标是否比文本更适合切换密码显示？与一小群朋友或同事尝试折扣式可用性测试。

  • 要体验屏幕阅读器如何处理表单，请安装 ChromeVox 扩展程序并在表单中导航。您是否可以仅使用 ChromeVox 完成表单？如果不能，您会更改什么？

这是您的表单此时应有的外观

更进一步

此 Codelab 未涵盖几个重要功能

  • 检查泄露的密码。您绝不应允许使用已泄露的密码。您可以（并且应该）使用密码检查服务来捕获泄露的密码。您可以使用现有服务或在您自己的服务器上运行一个服务。试用一下！将密码检查添加到您的表单。

  • 链接到您的服务条款和隐私政策文档：向用户明确说明您如何保护他们的数据。

  • 样式和品牌推广：确保这些与您网站的其余部分相匹配。当输入姓名和地址以及付款时，用户需要感到舒适，相信他们仍然在正确的位置。

  • 分析和真实用户监控：使您能够测试和监控真实用户的表单设计的性能和可用性。