在此 Codelab 中,您将学习如何构建易于使用的安全登录表单。
1. 使用有意义的 HTML
使用以下为工作量身打造的元素:
<form>
<section>
<label>
<button>
您会看到,这些元素支持内置的浏览器功能,可以提升无障碍水平,还能为标记添加含义。
点击“Remix to edit”(复刻以进行修改),使项目可供修改。
将以下代码添加到
<body>
元素:<form action="#" method="post"> <h1>Sign in</h1> <section> <label>Email</label> <input> </section> <section> <label>Password</label> <input> </section> <button>Sign in</button> </form>
此时,您的
index.html
文件应如下所示:点击查看应用以预览登录表单。 您添加的 HTML 有效且正确,但默认浏览器样式使其看起来很糟糕且难以使用,尤其是在移动设备上。
点击查看源代码即可返回到源代码。
2. 针对手指和拇指进行设计
调整内边距、外边距和字体大小,确保输入在移动设备上正常运行。
复制以下 CSS 并将其粘贴到
style.css
文件中:点击查看应用,查看新设置样式的登录表单。
点击查看来源即可返回到
style.css
文件。
这可真是不少代码!需要注意的主要事项是尺寸的变化:
- 将
padding
和margin
添加到输入中。 font-size
在移动设备和桌面设备上有所不同。
:invalid
选择器用于指示输入何时具有无效值。
此功能尚无法使用。
CSS 布局采用移动优先原则:
- 默认 CSS 适用于宽度小于 450 像素的视口。
- 媒体查询部分为宽度至少为 450 像素的视口设置了替换项。
在构建自己的此类表单时,在此流程阶段,务必要在桌面设备和移动设备上测试代码:
- 标签和输入文本是否可读,尤其是对于弱视用户而言?
- 输入内容和登录按钮是否足够大,可作为拇指触摸目标?
3. 添加输入源属性以启用内置浏览器功能
允许浏览器存储和自动填充输入值,并提供对内置密码管理功能的访问权限。
向表单 HTML 添加属性,使其如下所示:
<form action="#" method="post"> <h1>Sign in</h1> <section> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="username" required autofocus> </section> <section> <label for="password">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required> </section> <button id="sign-in">Sign in</button> </form>
再次查看您的应用,然后点击电子邮件。
请注意,焦点会移动到电子邮件输入框。这是因为标签通过
for="email"
属性与输入相关联。当标签或与标签关联的输入获得焦点时,屏幕阅读器还会读出标签文本。在移动设备上聚焦电子邮件输入。
请注意,键盘已针对输入电子邮件地址进行了优化。例如,
@
和.
字符可能会显示在主键盘上,而操作系统可能会在键盘上方显示已存储的电子邮件。之所以会发生上述所有情况,是因为type="email"
属性应用于<input>
元素。在密码输入框中输入一些文本。
默认情况下,文本处于隐藏状态,因为该元素已应用
type="password"
属性。
autocomplete
、name
、id
和type
属性可帮助浏览器了解输入的角色,以便存储日后可用于自动填充的数据。
- 在桌面设备上将焦点放在电子邮件输入框中,然后输入一些文字。
点击全屏图标
后,您会看到应用的网址。如果您在浏览器中存储了任何电子邮件地址,您可能会看到一个对话框,其中列出了这些已存储的电子邮件地址,供您选择。之所以出现这种情况,是因为电子邮件输入应用了
autocomplete="username"
属性。
autocomplete="username"
和autocomplete="current-password"
可帮助浏览器使用存储的值自动填充字段。
不同的浏览器使用不同的技术来确定表单输入的角色,并为各种不同的网站提供自动填充功能。
添加和移除属性,亲自尝试一下。
测试跨平台的行为非常重要。您应在不同设备上的不同浏览器中输入值并提交表单。借助 BrowserStack,您可以轻松地在各种平台上进行测试,而且 BrowserStack 对开源项目免费。试试看!
此时,您的 index.html
文件应如下所示:
4. 添加用于切换密码显示的界面
可用性专家强烈建议添加一个图标或按钮,让用户能够看到他们在密码字段中输入的文字。没有内置方法可以实现此目的,因此您需要使用 JavaScript 自行实现。
添加此功能的代码非常简单。此示例使用文字,而不是图标。
按如下所示的方式更新 index.html
、style.css
和 script.js
文件。
在
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="current-password" required> </section>
将以下 CSS 添加到
style.css
文件的底部:button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }
这会使显示密码按钮看起来像纯文本,并将其显示在密码部分的右上角。
将以下 JavaScript 添加到
script.js
文件,以切换密码显示并设置相应的aria-label
:const passwordInput = document.getElementById('password'); const togglePasswordButton = document.getElementById('toggle-password'); togglePasswordButton.addEventListener('click', togglePassword); function togglePassword() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; togglePasswordButton.textContent = 'Hide password'; togglePasswordButton.setAttribute('aria-label', 'Hide password.'); } else { passwordInput.type = 'password'; togglePasswordButton.textContent = 'Show password'; togglePasswordButton.setAttribute('aria-label', 'Show password as plain text. ' + 'Warning: this will display your password on the screen.'); } }
立即尝试显示密码逻辑。
- 查看您的应用。
- 在密码字段中输入一些文本。
- 点击显示密码。
在不同操作系统上的多个浏览器中重复执行第 4 步。
考虑用户体验设计:用户是否会注意到显示密码并理解其含义?有没有更好的方式来提供此功能?此时,您可以尝试与一小群朋友或同事进行折扣可用性测试。
如需了解此功能如何适用于屏幕阅读器,请安装 ChromeVox 经典版扩展程序,然后浏览表单。aria-label
值是否按预期运行?
某些网站(例如 Gmail)使用图标(而非文字)来切换密码显示状态。完成此 Codelab 后,请使用 SVG 图像实现此功能。 Material Design 提供了可免费下载的高品质图标。
此时,您的代码应如下所示:
5. 添加表单验证
您可以让用户在提交表单之前验证自己的数据,并向他们显示需要更改的内容,从而帮助他们正确输入数据。
HTML 表单元素和属性具有用于基本验证的内置功能,但您还应使用 JavaScript 在用户输入数据和尝试提交表单时执行更为可靠的验证。
此步骤使用约束验证 API(受到广泛支持),通过内置的浏览器界面添加自定义验证,以设置焦点和显示提示。
告知用户密码和任何其他输入的限制条件。不要让他们猜测!
更新
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="current-password" aria-describedby="password-constraints" required> <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div> </section>
此版本新增了两项功能:
- 有关密码限制的信息
- 密码输入的
aria-describedby
属性(屏幕阅读器会依次读取标签文本、输入类型(密码)和说明。)
将以下 CSS 添加到
style.css
文件的底部:div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }
将以下 JavaScript 添加到
script.js
文件:passwordInput.addEventListener('input', resetCustomValidity); function resetCustomValidity() { passwordInput.setCustomValidity(''); } // A production site would use more stringent password testing. function validatePassword() { let message= ''; if (!/.{8,}/.test(passwordInput.value)) { message = 'At least eight characters. '; } if (!/.*[A-Z].*/.test(passwordInput.value)) { message += 'At least one uppercase letter. '; } if (!/.*[a-z].*/.test(passwordInput.value)) { message += 'At least one lowercase letter.'; } passwordInput.setCustomValidity(message); } const form = document.querySelector('form'); const signinButton = document.querySelector('button#sign-in'); form.addEventListener('submit', handleFormSubmission); function handleFormSubmission(event) { event.preventDefault(); validatePassword(); form.reportValidity(); if (form.checkValidity() === false) { } else { // On a production site do form submission. alert('Logging in!') signinButton.disabled = 'true'; } }
试试看!
所有新近的浏览器都内置了表单验证功能,并支持使用 JavaScript 进行验证。
- 输入无效的电子邮件地址,然后点击登录。浏览器会显示警告,但不需要 JavaScript!
- 输入有效的电子邮件地址,然后点击登录,但不输入密码值。浏览器会警告您缺少必填值,并将焦点设置在密码输入框中。
- 输入无效密码,然后点击登录。现在,您会看到不同的消息,具体取决于出现的问题。
尝试使用不同的方式来帮助用户输入电子邮件地址和密码。改进了密码表单字段,提供了一些巧妙的建议。
此时,您的代码应如下所示:
继续前行
虽然此 Codelab 中未显示这些功能,但您仍需要以下四项关键的登录表单功能:
添加忘记了密码?按钮,方便用户重置密码。
链接到您的服务条款和隐私权政策文档,以便用户了解您如何保护他们的数据。
考虑风格和品牌,并确保这些附加功能与您网站的其余部分相符。
添加 Analytics 和 RUM,以便您可以测试和监控表单设计的性能和易用性。