网站登录界面html代码

一个登录界面，网站说到底就三样东西：输入框、登录代码按钮、界面提示文字。网站但要把这三样东西摆得让人愿意填，登录代码不简单。界面我见过太多后台系统，网站登录页做得像九十年代的登录代码表格，用户名和密码挤在一起，界面登录按钮灰不溜秋，网站点下去还不知道有没有反应。登录代码用户第一眼看到的界面就是这个页面，做砸了，网站后面功能再好也白搭。登录代码

下面这份代码是界面我自己常用的登录页骨架，干净、能跑、不依赖任何框架。直接复制到一个 .html 文件里就能在浏览器打开。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <style> * {  margin: 0; padding: 0; box-sizing: border-box; } body {  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .login-box {  background: #fff; padding: 40px 36px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 100%; max-width: 380px; } .login-box h2 {  font-size: 22px; color: #1a1a1a; margin-bottom: 28px; text-align: center; font-weight: 600; } .field {  margin-bottom: 20px; } .field label {  display: block; font-size: 13px; color: #666; margin-bottom: 6px; } .field input {  width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.2s; } .field input:focus {  border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,0.15); } .btn-login {  width: 100%; padding: 11px; background: #4a90d9; color: #fff; border: none; border-radius: 6px; font-size: 15px; cursor: pointer; transition: background 0.2s; } .btn-login:hover {  background: #3a7bc8; } .btn-login:active {  background: #2e6aad; } .msg {  text-align: center; font-size: 13px; color: #e74c3c; margin-top: 12px; min-height: 18px; } </style> </head> <body> <div class="login-box"> <h2>账号登录</h2> <form id="loginForm" onsubmit="return handleLogin(event)"> <div class="field"> <label for="username">用户名</label> <input type="text" id="username" placeholder="请输入用户名" autocomplete="username"> </div> <div class="field"> <label for="password">密码</label> <input type="password" id="password" placeholder="请输入密码" autocomplete="current-password"> </div> <button type="submit" class="btn-login">登 录</button> <div class="msg" id="msg"></div> </form> </div> <script> function handleLogin(e) {  e.preventDefault(); var user = document.getElementById('username').value.trim(); var pass = document.getElementById('password').value.trim(); var msg = document.getElementById('msg'); if (!user || !pass) {  msg.textContent = '用户名和密码不能为空'; return false; } // 这里换成实际的接口请求 msg.style.color = '#27ae60'; msg.textContent = '登录中...'; return false; } </script> </body> </html> 

这段代码有几个地方是我特意留意的。输入框的 autocomplete 属性别省，浏览器能帮用户自动填充，省掉手动输入的麻烦。密码框的 type="password" 不用多说，但很多人会忘了给用户名框加 autocomplete="username"，结果浏览器把密码填到用户名栏里去了。

表单提交我用 onsubmit 拦截，而不是直接写 action。原因很简单——前端先做一次空值校验，别让用户点了按钮才发现什么都没填，页面还刷新了一遍。那个 msg 区域预留着，报错也好，成功提示也好，有个地方放文字，不用弹 alert 打断操作。

样式上我用了 flex 居中，比 margin: auto 或者绝对定位省心。输入框聚焦时加了一圈淡蓝色阴影，这个细节成本很低，但用户能明确感知到“当前在填哪个框”。按钮的 :active 状态也写了，点下去颜色变深，手感会好很多。

还有一点，label 的 for 属性和 input 的 id 对应上。别小看这个，点文字也能聚焦到输入框，触屏设备上尤其有用。我见过不少登录页，标签就是个 span，点了没反应，白白浪费一块可点击区域。

实际项目里，把 handleLogin 里的注释换成 fetch 请求就行。密码在前端做一次 trim 是有必要的，用户复制粘贴时经常带空格。服务端该做的校验一样不能少，前端校验只是提升体验，不是安全措施。

整个页面没有引入任何外部资源，没有图标字体，没有 CSS 框架。加载速度快，部署简单。登录页不需要花哨，它只需要让用户用最短的时间进去。那些加了一堆动画、背景视频、粒子效果的登录页，说实话，我每次遇到都想直接关掉。

很赞哦!（344）