注册表单最佳实践 Codelab

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

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

全名输入使用 autocompletename 可以理解,但对于 还有其他输入? * 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 和真实用户监控: 针对真实用户进行测试和监控,从而测试和监控您表单设计的性能和易用性。