web做一个登录界面

登录界面不需要花哨。个登一个能用的录界东西，三个文件就够：HTML、个登CSS、录界JavaScript。个登我见过太多人一上来就装Vue、录界React，个登结果连一个原生表单提交都写不利索。录界先把手写功夫练好。个登

先写结构。录界打开编辑器，个登新建一个login.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> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-box"> <h2>欢迎回来</h2> <form id="loginForm"> <div class="input-group"> <label for="username">用户名</label> <input type="text" id="username" placeholder="请输入用户名" required> </div> <div class="input-group"> <label for="password">密码</label> <input type="password" id="password" placeholder="请输入密码" required> </div> <button type="submit">登 录</button> </form> <p class="error-msg" id="errorMsg"></p> </div> <script src="script.js"></script> </body> </html>

注意几个细节。label的录界for属性必须和input的id对应，点击文字能聚焦输入框，个登这是基本的可访问性。placeholder给提示，但别用它代替label——用户开始打字后提示就消失了，忘了自己在填什么。required是浏览器自带的校验，能拦一道是一道，但别指望它，后面JS还得再查一遍。

然后写样式。新建style.css：

* {  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: 360px; } .login-box h2 {  text-align: center; margin-bottom: 28px; color: #333; font-weight: 500; } .input-group {  margin-bottom: 20px; } .input-group label {  display: block; margin-bottom: 6px; font-size: 14px; color: #555; } .input-group input {  width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s; } .input-group input:focus {  border-color: #4a90d9; } button[type="submit"] {  width: 100%; padding: 11px; background: #4a90d9; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background 0.2s; } button[type="submit"]:hover {  background: #3a7bc8; } .error-msg {  color: #e74c3c; font-size: 13px; text-align: center; margin-top: 12px; min-height: 18px; }

box-sizing设成border-box省心，padding不会撑破宽度。flex居中比margin auto靠谱，不用算高度。输入框的focus状态一定要有视觉反馈，不然用户不知道光标在哪儿。按钮的hover也是，哪怕只变一点颜色，手感完全不同。

最后写逻辑。script.js：

const form = document.getElementById('loginForm'); const errorMsg = document.getElementById('errorMsg'); form.addEventListener('submit', function (e) {  e.preventDefault(); const username = document.getElementById('username').value.trim(); const password = document.getElementById('password').value.trim(); errorMsg.textContent = ''; if (!username) {  errorMsg.textContent = '用户名不能为空'; return; } if (password.length < 6) {  errorMsg.textContent = '密码至少6位'; return; } // 模拟提交 console.log('提交:', {  username, password }); errorMsg.style.color = '#27ae60'; errorMsg.textContent = '登录成功（模拟）'; // 实际项目中这里用 fetch 发请求 // fetch('/api/login', {  // method: 'POST', // headers: {  'Content-Type': 'application/json' }, // body: JSON.stringify({  username, password }) // }) });

e.preventDefault()必须加，不然表单会刷新页面，你写的所有校验都白费。trim()去掉首尾空格，用户复制粘贴时经常带进来。密码长度校验只是示例，真实项目里规则更复杂，但前端校验永远只是辅助——后端必须再验一遍，前端的东西用户想绕就能绕过去。

有个坑我踩过：如果input没有name属性，用FormData取值会拿到空对象。这里我用getElementById直接取，绕开了这个问题。但如果你打算用FormData，记得给每个input加上name。

这套代码在Chrome、Firefox、Safari上表现一致。移动端也凑合能用，输入框够大，不会触发iOS的自动缩放（font-size不小于16px就行，我这里设的14px，iOS上聚焦时会轻微放大，介意的话改成16px）。

登录界面说到底就三件事：让用户知道填什么、让用户方便地填、告诉用户填得对不对。花哨的动画和渐变都是锦上添花，先把这三件事做扎实。

本文地址：http://www.79wt.cn/news/1004e9699803.html