注册表单最佳实践 Codelab

Sam Dutton

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

第 1 步：使用有意义的 HTML

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

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

请在 index.html 中查看表单的 HTML。您会看到姓名、电子邮件地址 和密码。每个标签都属于一个部分，且每个标签都有一个标签。Sign up（注册）按钮：一个 <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>

点击查看应用以预览注册表单。这显示的是除了 默认浏览器样式。

  • 默认样式的外观是否正常？您会更改哪些内容来让表单看起来更美观？
  • 默认样式是否有效？使用您的表单时可能会遇到哪些问题？内容 了解有哪些内容？对屏幕阅读器或其他辅助技术有何影响？
  • 您的用户是哪些人，您定位了哪些设备和浏览器？
。

测试您的表单

您有机会购买大量硬件 Device Lab， 以更实惠、更简便的方式让您在各种浏览器、平台和设备上试用您的表单：

。

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

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

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

点击查看源代码以返回到您的源代码。

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

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

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

点击查看应用以查看样式化的注册表单。然后点击查看源代码返回 css/main.css。

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

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

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

。

第 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 可以理解，但对于 还有其他输入？ * autocomplete="username" 用于 Email 输入，表示浏览器的密码管理器将存储其名称 电子邮件地址作为“姓名”为该用户（用户名！）提供密码。 * 密码的 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 不涵盖几个重要功能：

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

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

  • 样式和品牌信息：确保这些内容与您网站的其他部分相匹配。输入姓名和地址时 以及付款时，用户需要感到安心，相信自己仍在正确的位置。

  • Google Analytics 和真实用户监控： 针对真实用户进行测试和监控，从而测试和监控您表单设计的性能和易用性。