注册表单最佳实践 Codelab

Sam Dutton

此 Codelab 向您展示了如何构建安全、无障碍且易于使用的注册表单。

第 1 步：使用有意义的 HTML

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

  • 点击 Remix to Edit 即可修改项目。

查看 index.html 中表单的 HTML。您会看到用于输入姓名、电子邮件地址和密码的输入框。每个问题都位于一个部分中，并且每个问题都有一个标签。注册按钮是… <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>

点击查看应用以预览注册表单。此图展示了除默认浏览器样式之外不使用任何 CSS 时表单的样子。

  • 默认样式看起来是否正常？您会做出哪些更改来让表单看起来更好？
  • 默认样式能否正常运行？使用原始表单可能会遇到哪些问题？移动设备上的效果如何？屏幕阅读器或其他辅助技术呢？
  • 您的用户是谁？您定位的是哪些设备和浏览器？

测试表单

您可以购买大量硬件并设置设备实验室，但您也可以通过更便宜、更简单的方式在各种浏览器、平台和设备上试用表单：

点击查看应用以预览注册表单。

  • 使用 Chrome DevTools 的“设备模式”在不同设备上试用您的表单。
  • 现在，在手机或其他实体设备上打开表单。您发现了哪些差异？

第 2 步：添加 CSS 以更好地使用表单

点击查看源代码可返回源代码。

到目前为止，HTML 没有任何问题，但您需要确保您的表单适用于各种移动设备和桌面设备用户。

在此步骤中，您将添加 CSS 以便更轻松地使用表单。

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

点击查看应用，查看样式经过设置的注册表单。然后，点击查看源代码以返回 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" 提供基本验证，并确保移动用户获得适当的键盘。试试看！

点击查看应用，然后点击电子邮件标签。会出现什么情况？焦点会移至电子邮件输入框，因为标签的 for 值与电子邮件输入框的 id 匹配。其他标签和输入的运作方式相同。当标签（或标签的关联输入）获得焦点时，屏幕阅读器也会读出标签文本。您可以尝试使用 ChromeVox 扩展程序。

请尝试提交包含空白字段的表单。浏览器不会提交表单，并会提示填写缺失的数据并设置焦点。这是因为您向所有输入添加了 require 属性。现在，请尝试使用少于 8 个字符的密码提交。由于 minlength="8" 属性，浏览器会警告密码长度不够，并将焦点设置为密码输入框。pattern（用于名称输入）和其他验证约束条件也是如此。浏览器会自动执行所有这些操作，而无需任何额外的代码。

为全名输入使用 autocomplete 值 name 是合理的，但其他输入呢？* 为 Email 输入 autocomplete="username" 表示浏览器的密码管理工具将将电子邮件地址存储为此用户的“姓名”（用户名！）以与密码搭配使用。* 密码的 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 属性。屏幕阅读器会依次读出标签文本、输入类型（密码）和说明。

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

（第 2 步中已经添加了 CSS。查看一下，了解密码切换按钮的样式和位置。）

  • 图标比文本更适合用于切换密码显示吗？邀请一小群好友或同事参与折扣实用性测试。

  • 如需体验屏幕阅读器如何与表单搭配使用，请安装 ChromeVox 扩展程序，然后浏览表单。 您能否仅使用 ChromeVox 填写表单？如果没有，您会做出哪些改变？

此时，您的表单应如下所示：

进一步了解

此 Codelab 未涵盖以下几项重要功能：

  • 检查是否有已泄露的密码。请勿使用已泄露的密码。您可以（并且应该）使用密码检查服务来查找已泄露的密码。您可以使用现有服务，也可以在自己的服务器上自行运行服务。快来试试吧！向表单添加密码检查。

  • 提供指向服务条款和隐私权政策文档的链接：向用户明确说明您如何保护其数据。

  • 样式和品牌：请确保这些内容与您网站的其余部分保持一致。在输入姓名和地址以及付款时，用户需要感到舒适，并确信自己仍在正确的位置。

  • 分析和真实用户监控：可针对真实用户测试和监控表单设计的效果和易用性。