用HTML和CSS写一个干净简单的登录表单UI

登录表单 UI 是前端实践里最常写的组件之一也是适合练手 HTML 和 CSS 综合能力的小项目。很多人一开始容易把页面做复杂加背景图、动画、图表结果真正用起来才发现布局崩、输入框对不齐、手机端错位。这次我不打算展示花哨效果而是先解决一个更实际的问题怎么用 HTML 和 CSS 写出一个干净、简单、能直接打开使用的登录表单界面。这篇文章适合两类人一类是刚学完 HTML 和 CSS 基础想做一个完整页面练习的人另一类是以后做后台系统、管理平台需要频繁写登录页的人。我会按照“先搭结构、再写样式、补细节、留扩展”的顺序来写最后附上排查思路。运行条件没有特殊要求能新建 HTML 和 CSS 文件用浏览器打开就能看到效果。1. 先想清楚登录表单 UI 的“干净”到底指什么1.1 登录页最少需要哪些信息写代码之前第一步是把页面信息层级列出来。一个能正常使用的登录表单至少包含以下内容页面标题或品牌标识账号输入框密码输入框登录按钮辅助操作入口忘记密码、注册链接、记住我如果你只是做一个纯前端演示标题、两个输入框、一个按钮就够了。但放在真实产品里“忘记密码”和“注册入口”通常不能省因为用户登录失败时需要下一步动作。这对应到 HTML 里就是form负责包裹整组输入控件label说明每个输入框的含义input承担输入button提交数据。信息层级清楚之后CSS 才能写得顺。很多人写登录页乱不是因为样式不会写而是 HTML 结构本身缺少规划。1.2 怎么判断一个页面算不算“干净”“干净”不等于没有任何装饰。判断标准应该是看信息是否容易被眼睛和键盘用户获取第一眼能不能直接看到登录按钮输入框是否统一宽度、高度、圆角是否一致页面上是否同时出现多个强视觉元素手机端是否出现横向滚动用 Tab 键切换输入框时顺序是否符合预期如果你做完之后能对这几条都给出“是”那这个登录表单就已经达到“干净简单”的目标了。这条标准会贯穿后面的 HTML 和 CSS 写法。2. 先搭 HTML 骨架结构对了样式才不容易崩2.1 最小可用的表单结构我不会一上来就写一大段嵌套很深的 div。先写一个最小可用版本让 HTML 语义正确再逐步加 class。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title登录/title link relstylesheet hrefstyle.css /head body main classlogin-page form classlogin-card action# methodpost div classlogin-header h1欢迎回来/h1 p请登录你的账号/p /div div classfield label forusername账号/label input typetext idusername nameusername placeholder请输入邮箱或用户名 autocompleteusername required /div div classfield label forpassword密码/label input typepassword idpassword namepassword placeholder请输入密码 autocompletecurrent-password required /div div classlogin-options label classcheckbox input typecheckbox nameremember span记住我/span /label a href#忘记密码/a /div button typesubmit classsubmit-btn登录/button p classlogin-footer 还没有账号 a href#注册一个/a /p /form /main /body /html这个结构用main包住整个登录区域语义上表示页面主体form负责承载输入和提交输入框各自放在.field容器里方便后面用 CSS 控制间距。2.2 label、name、autocomplete 为什么不能省有人为了省事会把标签写成这样input typetext placeholder用户名 required页面看起来没问题但没有label。后果是点击文字时输入框不会聚焦屏幕阅读器也读不出这个输入框是干什么的。真实场景里点击标签聚焦这个交互对移动端尤其重要。name属性也不能省。表单提交时浏览器会把name作为字段名传给后端。如果后端约定字段是username和password你这里写成userName或pwd提交就会失败。在没有后端的前提下也建议从一开始就保留规范名字避免以后返工。autocomplete是很多人忽略的细节。给账号输入框写autocompleteusername给密码输入框写autocompletecurrent-password浏览器才能正确识别并自动填充登录信息。这个体验现在是登录表单的基本要求。2.3 先用 HTML 自带能力不急着写 JSrequired、typepassword、typeemail都是 HTML 内置能力。浏览器在提交时会自动拦截空字段密码框会隐藏输入内容邮箱类型会校验格式。这些在早期原型阶段完全够用。需要留意的是不同浏览器的校验提示样式不一样。比如 Chrome 的提示气泡和 Firefox 的提示视觉不同typeemail对中文环境也可能过于严格。后面如果要接入产品再考虑用 JS 做统一提示。但初版能不用 JS 就先不用代码会更简单。3. CSS 基础样式从居中到输入框逐个属性拆开看3.1 先重置默认样式避免浏览器差异HTML 默认样式在不同浏览器里有差异比较明显的是body的默认margin: 8px、标题的margin、输入框的边框和字体。登录页通常需要自己控制这些值所以第一步先重置* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; background: #f0f2f5; min-height: 100vh; }box-sizing: border-box很关键。默认情况下元素宽度是内容宽度加上padding和border后总宽度会超过给定宽度。给输入框设置width: 100%时如果还加padding就很容易溢出卡片。改成border-box后宽度包含内边距和边框布局更好控制。字体这里写了一个回退链先试系统字体再试苹果的苹方再试微软雅黑最后是通用无衬线字体。这样在不同系统上不会出现字体缺失导致乱码或显示异常。3.2 用 flex 完成水平垂直居中登录页最常见的布局要求就是把卡片放在屏幕正中间。用 flex 实现时父容器要同时具备高度和主轴方向.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }这里的min-height: 100vh让父容器至少占据一整个视口高度。display: flex开启弹性布局后align-items: center负责交叉轴居中justify-content: center负责主轴居中。很多人居中失效不是 flex 写错而是父容器没有高度。如果只给.login-page加了一个普通高度或者根本忘了设置卡片当然不会垂直居中。还要注意当 flex