注册表单最佳实践 Codelab

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

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

  • 点击 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 是否适用于各种浏览器和屏幕尺寸?

  • 尝试调整 paddingmarginfont-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(用于名称输入)和其他验证约束条件也是如此。浏览器会自动执行所有这些操作,而无需任何额外的代码。

全名输入使用 autocompletename 是合理的,但其他输入呢?* 为 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 未涵盖以下几项重要功能:

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

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

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

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