如果你问一位前端工程师写过最多的页面是什么答案大概率不是华丽的企业官网也不是复杂的后台数据面板而是看起来最简单、最不起眼的登录表单。这事其实有点反直觉。登录表单的 UI 结构无非是一个输入框、一个密码框、一个按钮但它在项目里出现的频率极高而且用户对它的难看程度极其敏感。你可以在一个后台管理系统里忍受表格挤一点、导航乱一点但如果登录页的输入框对不齐、按钮位置奇怪、聚焦状态没有反馈用户的第一反应往往是这个系统不专业。换句话说登录表单是那个最容易暴露前端基本功的页面。这篇文章没有引入任何组件库也不依赖 JavaScript只用纯 HTML 和 CSS 来做一套干净、简单、适配移动端的登录表单 UI。你会看到如何规划语义化表单结构如何用 Flex 布局把卡片稳稳地居中在页面中央如何处理输入框的聚焦状态和按钮反馈以及实际项目中经常会踩的坑。读完之后你不仅有一个能直接复制运行的 demo还会明白一个登录表单背后到底藏着哪些值得认真对待的知识点。1. 登录表单被很多人低估的前端基础练兵场先说一个判断登录表单是前端基础知识点最集中的综合演练场之一。它不复杂但麻雀虽小五脏俱全。一个真正合格的登录页至少会牵涉到下面这些能力HTML 表单语义化form、label、input的正确用法而不是拿div拼一个假输入框。CSS 布局能力怎么让卡片在页面垂直、水平居中怎么让内部元素按行排列、按需对齐。交互状态设计输入框聚焦、按钮 hover、禁用状态、错误提示的视觉反馈。响应式适配在手机、平板、宽屏显示器上都能保持可用的布局。可访问性基础标签和输入框的关联、键盘可用性、焦点可见性。工程规范class 命名、代码组织、如何被团队其他成员维护。正因为登录表单几乎覆盖了前端入门阶段的全部核心知识点很多技术团队在招聘初级前端或培训新人时都会不自觉地把它用作摸底题。如果一个人能把登录表单的 HTML 语义讲清楚把布局做稳把状态设计齐全那他的前端地基基本是扎实的。另一个值得思考的问题是既然现在组件库这么普及直接拿 Ant Design、Element Plus 拖一个登录框不就行了为什么还要手动写一遍组件库解决的是按钮、输入框、表单校验这些零件从哪来的问题但它不负责登录页整体怎么摆。你仍然需要告诉布局系统卡片宽度多少、用什么方式居中、背景渐变怎么搭、手机端边距怎么调。这些底层布局和样式能力恰恰是组件库无法替你学习的。如果你写过一遍 HTML CSS 登录表单再去看组件库的文档心里会清晰得多反过来如果你连 Flex 居中都写不明白组件库只会让你在调试样式时更痛苦。所以这篇文章的目标不是教你不用组件库而是帮你先把底座打牢。底座稳了后面用什么都顺手。2. 动手前先想清楚HTML 结构应该长什么样很多人写页面有个习惯打开编辑器就疯狂敲div页面结构变成了大 div 套中 div中 div 套小 div。这种写法在后台管理页面里确实常见但放在登录表单这种语义非常明确的场景里就不太合适了。2.1 为什么不能用 div 包住一切div和span是浏览器里最中性的无语义标签它们本身不表达任何含义。而 HTML 提供了大量语义化标签比如form、label、input、button、main、section、header、footer这些标签都有明确的含义和默认行为。用div代替它们的最大问题是丢失了浏览器内置的能力。举个最简单的例子label和input通过for和id关联之后用户点击文字就能聚焦到输入框这个效果如果用div你得自己绑事件才能实现。form表单自带回车提交行为在输入框里按下 Enter 可以直接提交表单你用div模拟表单这个能力也没了。当然这不是说div完全不能用。在布局分组、装饰性容器这些没有语义的场景里div依然是最合适的选择。关键是你要分清楚什么时候用语义标签什么时候用无语义容器。登录表单是学习这个区分的最好案例。2.2 登录表单的语义化结构从整体看一个登录表单页面可以分成这样几层页面最外层main或div负责承载整个登录区块通常承担全屏居中的职责。卡片区块section一个可视的白色卡片里面放表单内容。卡片头部header展示标题和引导文案。核心表单form里面包含两个表单项、一个选项行和一个提交按钮。底部辅助footer放还没有账号立即注册这类跳转入口。以section为例它表示一个独立的、完整的主题分组以form为例它明确告诉浏览器和辅助技术这里是一个需要填写并提交的区域。这种分层结构对屏幕阅读器、对搜索引擎、对维护代码的后人都比一串div友好得多。表单内部的结构设计也有讲究。每个输入项应该用.form-group包住内部包含label和input。label的for属性要和input的id完全一致这样点击文字时输入框会获得焦点。同时密码框的type必须是password这样浏览器会把输入内容用圆点隐藏用户名框可以设置为text并配上placeholder作为输入提示。这里还有一个非常容易忽略的点autocomplete属性。给用户名输入框设置autocompleteusername给密码框设置autocompletecurrent-password浏览器和密码管理器就能正确识别这个字段帮用户自动填充登录信息。这对真实项目的体验提升非常明显很多新手会忽略这一点。你可能会问为什么不直接放requiredrequired是 HTML5 自带的必填校验确实应该加。但要明确它的边界它只是在浏览器端做一个快速的非空检查用户可以通过各种方式绕过真正的校验逻辑必须在后端完成。前端校验是体验后端校验才是安全。3. CSS 布局方案从页面居中到卡片落地HTML 结构定好之后最直观的问题就是怎么让登录卡片完美地出现在页面中间3.1 Flexbox 双轴居中在 CSS 里让一个元素在页面中水平垂直居中Flexbox 是当前最主流、最好用的方案之一。步骤如下给父容器设置display: flex。设置justify-content: center控制主轴上的对齐方式为居中。设置align-items: center控制交叉轴上的对齐方式为居中。给父容器设置一个高度通常是100vh表示占满整个视口高度。这里最容易踩的坑就是忘记给父容器设置高度。如果父容器没有高度align-items: center没有可分配的空间子元素自然无法垂直居中。很多新手问为什么我的居中不生效八成都是这个原因。在实际代码里父容器main.login-page内部只放了一个section.login-card。因为子元素是唯一的Flex 布局可以轻松把它居中。当子元素不止一个时Flex 还能控制它们之间的间距、换行方式、对齐基准线这就是为什么 Flexbox 是现在页面布局的默认选项之一。除了居中Flex 还非常擅长处理行内多个元素的对齐。比如登录表单第三行的记住我和忘记密码可以让它们分居左右两侧一个用justify-content: space-between就能搞定。这就是热搜词里频繁出现的css flex 布局子元素宽度自适应的典型应用场景父容器允许两个子元素各自占一边同时保持整体水平对齐。3.2 卡片式 UI 的层次感干净简单的登录页面视觉上通常不是把输入框直接糊在白墙上而是用一个白色卡片浮在浅色背景上。这种设计的好处是视觉层级更清楚、用户注意力更集中、页面看起来更精致。要做到位需要关注几个细节卡片宽度建议用width: 100%加max-width控制上限避免在大屏幕上卡片被拉得太宽。圆角border-radius给卡片四角一个柔和过渡推荐 8px 到 12px 之间的值。阴影box-shadow是卡片浮起来的关键。用0 8px 24px rgba(0,0,0,0.08)这类低透明度的阴影能营造轻盈的悬浮感而不是生硬的黑色边框。内边距卡片内部要有足够的留白让输入框和按钮不拥挤。padding建议至少上下各 24px、左右各 20px 以上。背景色方面浅灰蓝或浅灰色的渐变背景在登录页很常见它能给卡片一个温和的对比环境同时不抢卡片的视觉重心。用linear-gradient做一个简单的角度渐变成本极低但整体质感会明显提升。这里要强调一个原则越简单的页面越考验你对间距、圆角、阴影、字重这些细微差别的敏感度。你可以把同一个 HTML 配上三套不同的 CSS得到的效果差异会非常大。干净不是要素少而是每个要素都恰到好处。4. 完整代码实现干净简单的登录表单现在进入实操环节。我会给出一个可以直接复制运行的完整示例。这个示例不依赖任何框架只要有一个浏览器就能打开。4.1 目录结构建议按下面的结构存放文件login-demo/ ├── index.html └── css/ └── style.cssindex.html是页面结构css/style.css是全部样式。注意style.css放在css子目录里HTML 中引用时要写对相对路径。4.2 HTML 文件文件路径login-demo/index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title用户登录 - HTML CSS 演示/title link relstylesheet hrefcss/style.css /head body main classlogin-page section classlogin-card header classlogin-header h1欢迎回来/h1 p请使用您的账号登录系统/p /header form classlogin-form action/api/login methodpost div classform-group label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 autocompleteusername required /div div classform-group label forpassword密码/label input typepassword idpassword namepassword placeholder请输入密码 autocompletecurrent-password required /div div classform-options label classcheckbox-label input typecheckbox nameremember value1 span记住我/span /label a href# classforgot-link忘记密码/a /div button typesubmit classsubmit-btn登 录/button /form footer classlogin-footer p还没有账号a href#立即注册/a/p /footer /section /main /body /html这里要解释几个关键点action/api/login和methodpost是表单的提交目标和请求方式。这个地址在纯 UI 演示里不会真的生效实际开发时需要替换成后端提供的接口地址。两个input都带了required提交时浏览器会先检查必填项是否为空。name属性决定了这个字段提交时的参数名后端会按这个名字接收参数不能随便写。for和id的配对关系一定要正确点击用户名三个字时鼠标焦点应该自动落到用户名输入框里这是原生 HTML 的无障碍交互不需要任何 JS。两个a链接暂时用了#表示假链接真实项目中要换成对应路由地址。忘记密码、立即注册这类入口在实际产品里必须能指向真实功能不能只是装饰品。4.3 CSS 文件文件路径login-demo/css/style.css/* 基础重置去掉默认边距统一盒子模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: PingFang SC, Microsoft YaHei, Helvetica Neue, Arial, sans-serif; background-color: #f5f7fa; color: #333; line-height: 1.6; min-height: 100vh; } /* 页面容器使用 Flex 双轴居中 */ .login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; background: linear-gradient(135deg, #e8eef7 0%, #d4dce8 100%); } /* 卡片区域 */ .login-card { width: 100%; max-width: 400px; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); padding: 40px 32px 28px; } .login-header { text-align: center; margin-bottom: 28px; } .login-header h1 { font-size: 24px; font-weight: 600; color: #1f2329; margin-bottom: 6px; } .login-header p { font-size: 14px; color: #86909c; } /* 表单项标签在上输入框在下 */ .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 14px; color: #4e5969; margin-bottom: 6px; font-weight: 500; } .form-group input { width: 100%; height: 42px; padding: 0 12px; font-size: 14px; border: 1px solid #dcdfe6; border-radius: 6px; background-color: #fafbfc; color: #1f2329; transition: border-color 0.25s, box-shadow 0.25s; outline: none; } .form-group input::placeholder { color: #a9aeb8; } /* 输入框聚焦状态 */ .form-group input:focus { border-color: #409eff; background-color: #ffffff; box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.15); } /* 选项行记住我 忘记密码 */ .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; } .checkbox-label { display: flex; align-items: center; gap: 6px; color: #4e5969; cursor: pointer; } .checkbox-label input[typecheckbox] { width: 16px; height: 16px; accent-color: #409eff; } .forgot-link { color: #409eff; text-decoration: none; } .forgot-link:hover { text-decoration: underline; } /* 登录按钮 */ .submit-btn { width: 100%; height: 44px; border: none; border-radius: 6px; background-color: #409eff; color: #ffffff; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.25s, transform 0.15s; } .submit-btn:hover { background-color: #337ecc; } .submit-btn:active { transform: scale(0.98); } /* 底部辅助文字 */ .login-footer { text-align: center; margin-top: 20px; font-size: 14px; color: #86909c; } .login-footer a { color: #409eff; text-decoration: none; } .login-footer a:hover { text-decoration: underline; } /* 小屏幕适配 */ media (max-width: 480px) { .login-card { padding: 28px 20px 20px; } }4.4 关键设计说明这套 CSS 有几个设计思路值得展开说明。第一*选择器做了基础重置把margin和padding清零并设置box-sizing: border-box。如果不做这一步输入框的width: 100%加上padding和border之后实际宽度会超出容器导致布局错乱。border-box让width直接包含内边距和边框这是现代前端开发里的基础共识。第二.login-page是整个页面的布局锚点。它使用min-height: 100vh而不是height: 100vh好处是当内容超出视口时页面可以继续向下滚动不会被截断。Flex 三件套配合这个高度让卡片始终处于视口中央。第三输入框的聚焦反馈是一个很值得学习的细节。transition让边框颜色和阴影的变化不是瞬间完成而是平滑过渡box-shadow用一个半透明蓝色光晕配合边框变色给用户清晰的当前正在输入这个框的暗示。这个效果现在很多组件库都在用但你看完代码就会发现它其实就是几个属性组合出来的。第四按钮的transition同时覆盖了background-color和transform。鼠标悬停时按钮变深色按下时稍微缩小到 98%视觉上有一种微妙的按下去的物理感。整个交互没有一行 JS全靠 CSS 完成。5. 状态设计与交互细节让 UI 有反馈好的 UI 不能是死板的一张图它必须让用户随时知道我在哪、我在干什么、我的操作有没有被响应。登录表单里至少有三个状态值得认真处理。5.1 输入框的默认、占位和聚焦状态一个输入框通常有四种视觉状态默认、占位、聚焦、禁用。默认状态用浅灰色边框区分内容区占位文字::placeholder用更浅的颜色避免和真实输入内容混淆聚焦状态用蓝色边框和光晕强调当前输入框。真正容易忽略的是禁用状态。如果某些场景下用户名输入框暂时不可用比如等待上一步操作完成应该通过disabled属性或者.form-group input:disabled样式弱化它让用户知道这个框当前不能编辑。禁用不能只是点了没反应视觉上也要有明确提示否则用户会觉得自己操作出了问题。5.2 按钮的 hover、active 状态按钮的 hover 状态在桌面端很重要鼠标移入时颜色加深用户会知道这是一个可以点击的元素。active状态表示鼠标按下但还没松开此时按钮缩小一点形成按下反馈。对移动端用户来说hover 概念几乎不存在触摸反馈更多依赖于active状态或浏览器原生的点击高亮。另外如果登录请求需要时间真实项目里一般会把按钮改为disabled状态并在按钮内显示登录中...文字或一个小 loading 动画。这是纯 CSS 示例做不到的因为它需要 JavaScript 控制状态但你在做工程化版本时一定要考虑到。5.3 选项行的细节记住我和忘记密码这一行用 Flex 的space-between让两个元素自然分居两端。复选框用原生input[typecheckbox]加accent-color属性这是现代浏览器提供的原生着色方案一行代码就能把复选框颜色改成主题蓝不需要自己画一个假的复选框。这里有个小技巧checkbox-label把文字和复选框放在同一个label里并使用gap控制间距。这样整个记住我区域都是可点击的点击文字也能选中复选框大大提高了操作命中面积。这个交互细节在移动端尤其重要。6. 响应式适配与移动端优化登录表单在桌面端通常是居中的小卡片但在手机端需要处理的问题会变多。第一视口设置。HTML 的head里必须有meta nameviewport contentwidthdevice-width, initial-scale1.0。如果没有这行代码手机浏览器可能按桌面宽度渲染页面然后缩小到屏幕上用户看到的字会非常小、输入框也点不准。这行标签是移动端适配的第一步。第二输入框字体大小。浏览器在 iOS 上有个默认行为如果输入框的font-size小于 16px点击输入时页面会自动放大造成很不好的体验。要避免这个情况输入框字体大小最好设置为 16px 或以上。第三布局压缩。当屏幕尺寸小于 480px 时卡片的内边距要适当调小避免左右留白太少导致内容拥挤。我也见过一些方案建议非常窄的屏幕上卡片圆角可以缩小、阴影可以减弱让卡片更像一个从顶部滑下来的面板。这些都属于精细化调整可以根据产品风格选择。第四触摸目标大小。按钮高度 44px 左右是移动端比较推荐的最小触摸高度太矮会让用户很难点准。复选框16px到20px也不是越大越好要考虑整体视觉协调。第五键盘与滚动。如果页面内容超过一屏要保证页面可以正常滚动而不是被height: 100vh锁死。这也是我在.login-page上使用min-height而不是height的原因。7. 常见问题与排查方法登录表单页面代码不多但新手在运行时经常会遇到一些问题。我把比较典型的几类整理成了一张表。问题现象可能原因排查方式解决方案双击打开 HTMLCSS 没有生效link标签的路径写错或 CSS 文件路径层级不对打开浏览器开发者工具查看 Network 中样式文件是否 404核对hrefcss/style.css是否与文件实际位置匹配卡片垂直不居中父容器没有设置高度或align-items写错了检查.login-page是否有min-height: 100vh和display: flex补上高度和 Flex 属性点击标签文字无法聚焦到输入框label的for与input的id不匹配检查两个属性值是否完全一致包括大小写统一为一致的值输入框宽度超出卡片没设置box-sizing: border-box检查 CSS 开头是否有盒模型重置给*设置box-sizing: border-box手机端点击输入框页面自动放大输入框font-size小于 16px在手机上实测或查看计算样式将输入框字体调为 16px 或以上浏览器不自动填充账号密码autocomplete属性缺失或填错检查用户名和密码框的autocomplete值分别设置username和current-password使用组件库后自己的样式覆盖不掉选择器优先级不足用开发者工具查看被计算的样式来源提高选择器优先级而不是滥用!important在这些问题里双击打开 HTML 但 CSS 没生效是新手最常见的问题。它通常发生在两种场景一种是把 HTML 和 CSS 放在同一个目录却写了hrefcss/style.css另一种是把 CSS 文件放在css子目录却写了hrefstyle.css。路径问题只要打开开发者工具看一眼样式请求是否 404基本一两分钟就能定位。还有一类问题不是报错而是浏览器自动填充行为带来的样式难看。有些浏览器自动填充账号密码后会给输入框套上淡黄色背景这其实不是错误是浏览器为了可识别性做的处理。如果产品设计上不能接受需要在后续用特定的:-webkit-autofill样式去覆盖但要注意这种方法有兼容性边界不能为了追求纯色而牺牲密码管理器的可用性。8. 最佳实践与工程建议在上面完整示例的基础上这里给出一些更贴近真实项目的工程建议帮你避免从写一个 demo到做一个可上线登录页之间的坑。第一class 命名要有语义。建议使用模块-元素-修饰符的思路比如.login-card、.login-header、.submit-btn不要用.box1、.box2这种没有含义的命名。团队协作时其他人看到 class 名称就能大概猜出这个元素是干什么的。当然如果你想引入 BEM 或原子化 CSS 方案那是另一个话题但前提是命名逻辑必须清晰。第二不要依赖!important。很多新手发现自己写的样式不生效第一反应是加!important。这个做法虽然能让样式生效但会破坏 CSS 优先级体系后面再想覆盖就非常痛苦。正确做法是检查选择器优先级或者调整样式表的引入顺序。如果项目里已经引入了 Bootstrap、Element Plus 这类框架更要小心这一点。第三表单提交要有完整链路。登录表单不是只做 UI它的动作必须连接到真实接口。生产环境中表单提交应该包含前端必填校验、请求状态管理加载中、成功、失败、失败时的错误提示、防重复提交等。这些逻辑需要 JavaScript 配合但这篇示例里的 HTML 结构和 CSS 样式可以直接作为基础。第四安全边界要清楚。登录涉及用户名、密码这些敏感信息生产环境的表单必须使用 HTTPS 传输前端required校验只是用户体验的一部分不能作为安全措施真正的密码校验、账号状态、验证码、登录失败限制、会话管理都在后端完成。如果是新项目还应该考虑引入验证码、双因素认证等机制这些都不是前端 UI 能替代的。第五关注可访问性。除了label关联输入框之外错误提示应该用aria-describedby关联到具体的表单字段焦点状态不能被outline: none完全抹掉键盘 Tab 键应该能按合理顺序走完整个表单。很多项目在做登录页时只盯着视觉却忽略了这些问题导致一部分用户无法完成登录。第六代码拆分与复用。如果你的项目里有多个页面都需要卡片样式或输入框样式建议把通用样式抽成单独的类比如.page-center、.form-control然后在具体页面里组合使用。这样能避免大量重复代码也让后续统一改主题更加方便。9. 总结与下一步可以做什么这篇文章从登录表单为什么值得认真做这个问题出发走完了从 HTML 语义结构、Flex 布局、完整代码实现到状态设计、响应式适配、常见问题排查的全过程。你现在手里应该有一套不依赖任何框架、可以直接运行的登录表单代码也对每个关键细节背后的理由有了理解。如果你刚学完 HTML 和 CSS 基础下一步可以尝试在现有代码上做几组小练习把配色换成品牌色把卡片改成深色主题增加一个密码可见切换图标别看文档先自己想怎么实现把两个输入框之间的间距拉开或合并做一个多端页面的布局适配对比。这些练习都不难但每做一个你都会对布局、状态、控件交互有更深的感觉。最后提醒一句登录表单永远只是入口不是终点。当它前端部分跑通之后你真正要面对的是接口设计、鉴权方案、会话保持、安全性加固这些更硬核的问题。先把 UI 这层地基打牢再往后面走每一步都会顺利很多。如果你在实际运行中遇到了文章里没提到的问题欢迎把报错信息和代码片段放在评论区一起讨论。