注册表单最佳实践 Codelab

Sam Dutton

了解如何构建安全、易于访问且更易于使用的注册表单。 最终形式可在 CodePen 中查看。

1. 使用有意义的 HTML

了解如何使用表单元素来充分利用内置的浏览器功能。

  1. 创建新的 Pen。

  2. 将以下代码复制并粘贴到 HTML 编辑器中。

    <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>

  3. 点击实时预览，查看 HTML 表单。有用于输入姓名、电子邮件地址和密码的输入框。此表单仅使用默认浏览器 CSS。

每个输入都位于一个部分中，并且都有一个标签。注册按钮非常重要，是一个 <button>。在本 Codelab 的后半部分，您将了解所有这些元素的特殊功能。

问问自己以下问题：

  • 默认样式看起来是否合适？您会做出哪些更改来改进表单的外观？
  • 默认样式是否能正常运行？如果按原样使用您的表单，可能会遇到哪些问题？移动设备上的情况如何？那么，对于屏幕阅读器或其他辅助技术呢？
  • 您的用户是谁？您面向哪些设备和浏览器？

测试表单

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

打开 CodePen 的实时视图，或访问我们的实时视图。 使用 Chrome 开发者工具的设备模式在不同设备上测试表单。

现在，在手机或其他真实设备上打开表单。您发现了哪些差异？

2. 添加 CSS 以使表单更好地发挥作用

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

在此步骤中，您将添加 CSS 以使表单更易于使用。 将此 CSS 复制并粘贴到 css/main.css 文件中。

点击预览，查看设置了样式的注册表单。

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

  • 尝试调整 padding、margin 和 font-size 以适应您的测试设备。
  • CSS 是移动优先的。使用媒体查询，为宽度至少为 400px 的视口应用 CSS 规则，然后再次为宽度至少为 500px 的视口应用 CSS 规则。这些断点是否足够？如何为表单选择断点？

3. 添加属性以帮助用户输入数据

向输入元素添加属性，使浏览器能够存储和自动填充表单字段值，并警告缺少数据或数据无效的字段。

更新 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 相匹配。其他标签和输入的工作方式相同。当标签（或标签关联的输入）获得焦点时，屏幕阅读器还会读出标签文本。

尝试提交包含空白字段的表单。浏览器不会提交表单，而是会提示用户填写缺失的数据并设置焦点。这是因为我们已将 require 属性添加到所有输入中。

现在，尝试提交一个少于 8 个字符的密码。浏览器会警告密码不够长，并因 minlength="8" 属性而将焦点设置在密码输入上。pattern（用于名称输入）和其他验证限制也是如此。 浏览器会自动完成所有这些操作，无需任何额外的代码。

为全名输入使用 autocomplete 值 name 是合理的，但其他输入呢？

  • 电子邮件地址输入的 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

此版本新增了一些功能，可帮助用户输入密码：

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

如需启用密码切换按钮并向用户显示有关密码限制的信息，请复制 JavaScript，然后将其粘贴到 JavaScript 编辑器中。

  • 使用图标切换密码显示状态是否比使用文字更好？尝试与一小群朋友或同事进行折扣可用性测试。

  • 如需体验屏幕阅读器如何处理表单，请安装 ChromeVox 扩展程序，然后浏览表单。您能否仅使用 ChromeVox 完成表单？如果没有，您会做出哪些更改？

继续前行

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

  • 检查是否有已泄露的密码。您绝不应允许使用已泄露的密码。您可以（也应该）使用密码检查服务来发现已泄露的密码。

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

  • 更新表单的样式和品牌，确保其与网站的其他部分相符。这有助于用户在输入姓名和地址时，尤其是付款时，确信自己处于正确的页面。

  • 添加 Analytics 和真实用户监控。 让真实用户测试并监控表单设计的性能和易用性。