注册表单最佳实践 Codelab

萨姆·达顿

此 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 Device Mode 在不同设备上尝试您的表单。
  • 现在，在手机或其他真实设备上打开表单。您发现了哪些差异？

第 2 步：添加 CSS 以改善表单效果

点击 View Source 可返回源代码。

到目前为止，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" 提供基本验证，并确保移动设备用户能获得合适的键盘。试试看！

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

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

为全名输入使用 autocomplete 值 name 可以，但其他输入呢？ * Email 输入为 autocomplete="username" 表示浏览器的密码管理器会将电子邮件地址存储为此用户（用户名！）与密码对应的“名称”。 * Password 的 autocomplete="new-password" 用于提示密码管理工具应主动将此值存储为当前网站的密码。然后，您可以使用 autocomplete="current-password" 在登录表单中启用自动填充功能（请注意，这是一个sign-up表单）。

第 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 不涵盖几项重要功能：

  • 正在检查是否存在已泄露的密码。切勿允许已泄露的密码。 您可以（并且应该）使用密码检查服务来发现已泄露的密码。 您可以使用现有服务，也可以在您自己的服务器上自己运行一项服务。试试看！在表单中添加密码检查功能。

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

  • 样式和品牌信息：确保这些内容与您网站的其余内容相得益彰。在输入姓名和地址并付款时，需要让用户感到放心，确信自己仍然位于正确的位置。

  • Analytics 和真实用户监控：支持为真实用户测试和监控表单设计的性能和易用性。