后端开发教程 - Java、Spring Boot 实战 - msg200.com
最佳实践：登录表单
概述
本文专门关注登录表单的设计和开发，仅供此范围内参考。
它并不试图提供构建 Web 表单的全面指南，因此不应被视为此类指南。
目录
1 — HTML
1.1 — HTML 代码示例
2 —类型和属性
2.1 —类型
2.1.1 —使用类型的代码示例
2.2. —属性
2.2.1 —使用属性的代码示例
3 — CSS
3.1 — CSS 代码示例
4 — JS
5 —快速回顾
6 —参考文献
HTML
- 为每个输入框指定一个
<label>元素，如果必须在两者之间选择，则<label>优先使用。虽然标签很有用，但不应使用它们来替换元素。<placeholder><placeholder><label> - 将元素放置在元素
<label>上方<input>。 - 不要强迫用户输入两次信息；没错，这包括邮箱地址和密码。相反，应该通过发送确认邮件来确认用户账户所有权，并让他们轻松重置密码。
“在设计登录表单时，要努力确保密码质量而不是密码数量。”
- 为按钮添加
<button>标签，并考虑使"SUBMIT"按钮更具描述性。使用类似"Sign In"或"Subscribe"的措辞，让用户知道点击后会发生什么。 - 基本登录表单应该对每个部分使用适用的 HTML 元素，而不是
<div>使用无数额外的 JavaScript 行呈现的元素集群。
HTML 代码示例
<form>
<section>
<label for="email">Email</label>
<input id="email">
</section>
<section>
<label for="password">Password</label>
<input id="password">
</section>
<button>Sign In</button>
</form>
类型和属性
- 可以（并且应该）向登录表单添加其他详细信息，为浏览器提供更多上下文。
- 该
<input>标签及其 HTML 兄弟标签<select>接受<textarea>,两种参数——类型和属性。
类型
- 类型的值默认为
"text"，但"email"和"password"是与各自输入一起使用的首选类型。 - 出于安全考虑，密码输入框应始终定义其类型
<input type=password>。这将指示浏览器默认隐藏用户密码。
使用类型的代码示例
<input type="email">
<input type="password">
<button type="submit"> // or // <input type="submit">
属性
- 与类型一样，某些属性（例如）
autocomplete,可以简化用户登录时的体验。 - 现代浏览器使用这些属性的推断来帮助决定何时显示密码强度计、提供保存新密码或更新密码，或使用先前代表用户存储的凭据自动完成表单。
- 高质量的登录表单会将
autocomplete属性添加到所有相关输入中，从而允许浏览器的设置和/或用户的偏好决定如何利用所提供的提示。 - 此外，该
required属性可以在（并且应该）所有电子邮件/用户名和密码字段中使用。
使用属性的代码示例
<input type-"email" autocomplete="email" required>
<input type="text" autocomplete="username" required>
<input type="password" autocomplete="new-password" required>
<input type="password" autocomplete="current-password"
required>
<input type="number" autocomplete="one-time-code">
CSS
- 一般来说，对于移动设备使用大约 16px/1rem 的填充。
- 与上面相同，但桌面上只有 10px/0.625rem。
- 所有输入和按钮都应该可见，并留出足够的空间来点击移动视图中的每个元素。
- 为拇指而非手指设计。
font-size在移动设备上至少增加2px。对于特定字体，有时可能需要增加至 4px。- 利用浏览器内置的无效输入检测功能。无需 JavaScript，
:invalid只需<color: red>在 CSS 中渲染该属性即可。
CSS 代码示例
/** GOOD */
input[type=email]:invalid {
color: red;
}
/** EVEN BETTER */
input[type=email]:not(:placeholder-shown):invalid {
color: red;
}
JS
- 确保登录按钮在移动设备上保持可见，并且不会被键盘遮挡。一个几乎万无一失的方法是，只在初始屏幕上请求输入电子邮件地址，然后在第二个屏幕上再要求输入密码。
- 使用 JavaScript 呈现
"SHOW PASSWORD"图标或文本按钮。 - 重要提示：在将用户输入发送到服务器之前，通过检查预期的 REGEX 大小写和 MIME 类型来提供额外的表单验证以净化用户输入。
快速回顾
让我将您刚刚读到的所有内容浓缩为两句话，包含关键要点。
大多数登录表单都能利用 HTML5 和 CSS 的原生功能，同时减少 JavaScript 的使用，从而提供相同甚至更佳的功能。这种方法在许多基础层面上都带来了改进，包括可访问性、核心 Web 指标、PWA 标准以及设计简洁性。
要查看我为本文参考的参考文献列表，请滚动到页面底部；也许您会发现它们很有帮助。
别忘了💖这篇文章并留下💭。如果你觉得特别慷慨，请点击下方我的名字来🎆订阅🎇！
感谢您的阅读！
-- killshot13
