手把手教你写一个简洁实用的登录界面代码

做网页开发的时候，登录界面几乎是每个项目都绕不开的一环。不管是公司内部系统，还是个人博客，用户一进来总得先登录。最近帮朋友搭了个小工具网站，第一件事就是搞登录页。今天就把这个过程写下来，顺带把核心代码贴出来，有需要的人可以直接拿去改改就能用。

结构清晰是第一步

登录界面不需要太复杂，重点是让用户一眼看懂怎么操作。我一般用 HTML 搭个简单的表单结构，包含用户名、密码输入框和登录按钮。外层加个容器，方便后面加样式。

<div class="login-container">
  <h2>用户登录</h2>
  <form id="loginForm">
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" required />
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" name="password" required />
    </div>
    <button type="submit">登 录</button>
  </form>
</div>

样式别太花哨，清爽就行

用了点简单的 CSS 让它看起来不那么原始。居中显示，加点圆角和阴影，输入框留足间距，手指在手机上也能点得准。

.login-container {
  width: 100%;
  max-width: 400px;
  margin: 100px auto;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  font-family: Arial, sans-serif;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}

.input-group {
  margin-bottom: 16px;
}

.input-group label {
  display: block;
  margin-bottom: 6px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

加点交互让体验更顺

光有界面还不够，得让它能响应用户的操作。比如点击登录时，检查一下输入是否为空，再模拟发个请求。实际项目里这里会对接后端接口，但现在先用 console 打印看看效果。

document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if (!username || !password) {
    alert('请输入用户名和密码');
    return;
  }

  // 这里可以换成真实的登录请求
  console.log('登录数据:', { username, password });
  alert('登录请求已发送，请查看控制台');
});

这个登录页我在本地跑通了，也丢到测试环境让几个朋友试了下，反馈都说看着清楚，操作不卡。其实很多功能不一定要多炫，把基础体验做扎实，反而更受欢迎。

如果你也在搭管理系统或者小程序后台，这个结构可以直接复制过去，改改样式和接口就能用。有时候省下的不是代码时间，是反复改稿的精力。