网站登录页面代码

一个登录页面，网站核心就三样东西：两个输入框、登录代码一个按钮、页面一段验证逻辑。网站听起来简单，登录代码但真正写起来，页面坑不少。网站

先看最基础的登录代码 HTML 结构。很多人一上来就 div 套 div，页面嵌套五六层，网站其实完全没必要。登录代码一个 form 元素就能搞定大半：

<form id="loginForm"> <input type="text" id="username" placeholder="用户名"> <input type="password" id="password" placeholder="密码"> <button type="submit">登录</button> </form>

就这四行，页面骨架已经立住了。网站input 的登录代码 type 属性别乱写，密码框必须用 type="password"，页面否则明文显示，用户当场关页面走人。placeholder 是提示文字，不是标签，别拿它当 label 用——输入内容后提示就消失了，用户回头根本不知道这框填的是什么。老实加个 <label>，或者用 aria-label 兜底。

样式方面，我见过太多登录页死在“居中”这件事上。flex 三行代码的事，有人非要用绝对定位加负 margin，窗口一缩放就歪。直接给 body 上 flex：

body {  display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f5f5f5; }

输入框别用默认样式交差。默认的边框又细又灰，聚焦时那个蓝色轮廓在不同浏览器里长得都不一样。手动统一一下：

input {  display: block; width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; box-sizing: border-box; } input:focus {  outline: none; border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74,144,217,0.15); }

box-sizing: border-box 不加的话，padding 会把宽度撑出去，两个输入框宽度对不齐，看着特别扭。font-size 设成 16px 是有原因的——iOS Safari 里小于 16px 的输入框会自动放大页面，用户体验稀碎。

按钮别用 <div> 冒充，用 <button type="submit">，这样回车键能直接提交表单。样式上给个明确的背景色和 hover 状态：

button {  width: 100%; padding: 12px; background: #4a90d9; color: #fff; border: none; border-radius: 6px; font-size: 16px; cursor: pointer; } button:hover {  background: #3a7bc8; }

到这一步，页面能看了。但真正决定登录页好不好用的，是验证逻辑。

前端验证永远只是辅助，后端必须再验一遍。我见过有人前端校验完直接跳转，后端接口裸奔，改个 JS 就能绕过。前端验证的目的是减少无效请求，不是保障安全。

用户名和密码的非空检查是最基本的：

document.getElementById('loginForm').addEventListener('submit', function(e) {  e.preventDefault(); var username = document.getElementById('username').value.trim(); var password = document.getElementById('password').value; if (!username || !password) {  alert('用户名和密码不能为空'); return; } // 发送请求 fetch('/api/login', {  method: 'POST', headers: {  'Content-Type': 'application/json' }, body: JSON.stringify({  username: username, password: password }) }) .then(function(res) {  return res.json(); }) .then(function(data) {  if (data.success) {  window.location.href = '/dashboard'; } else {  alert(data.message || '登录失败'); } }); });

trim() 那一下别省。用户复制粘贴用户名时经常带空格，不处理的话后端匹配不上，用户还以为自己密码错了。

密码框旁边可以加个“显示密码”的切换。实现很简单，点一下把 type 在 password 和 text 之间切：

var toggle = document.getElementById('togglePassword'); toggle.addEventListener('click', function() {  var pwd = document.getElementById('password'); if (pwd.type === 'password') {  pwd.type = 'text'; toggle.textContent = '隐藏'; } else {  pwd.type = 'password'; toggle.textContent = '显示'; } });

还有一件事：别在客户端存密码。什么 localStorage、sessionStorage，统统不要碰。登录成功后拿到的 token 可以存，密码本身绝对不能落地。

最后说个细节。提交按钮在请求发出后应该禁用，防止用户狂点导致重复提交。加一行 button.disabled = true，请求回来再恢复。这种小地方，用户不会夸你，但不做的话，出了问题就是实打实的麻烦。

登录页代码量不大，但每一行都跟安全、体验挂钩。写完自己拿手机试一遍，拿不同浏览器试一遍，比看十篇教程都管用。

(责任编辑：时尚)