直接看代码。户登一个能用的录界登录界面，核心就三样东西：HTML 搭骨架，面代码CSS 管长相，户登JavaScript 处理交互和校验。录界别一上来就想着 React 或 Vue，面代码原生写法跑通了，户登后面换框架只是录界换个写法的事。

先写 HTML 结构。面代码表单必须用 <form> 包住，户登提交按钮用 type="submit"，录界这样浏览器自带回车提交。面代码输入框的户登 name 属性别省，后端靠它取数据。录界密码框记得 type="password"，面代码不然明文显示就尴尬了。

<form id="loginForm" action="/api/login" method="post"> <div class="field"> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="手机号或邮箱" autocomplete="username" required> </div> <div class="field"> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="至少8位" autocomplete="current-password" required> </div> <div class="options"> <label><input type="checkbox" name="remember"> 记住我</label> <a href="/reset">忘记密码？</a> </div> <button type="submit">登录</button> <p id="errorMsg" class="error"></p> </form> 

CSS 部分，我习惯用 flex 居中，不搞绝对定位那套。输入框的 box-sizing: border-box 必须加，否则 padding 会把宽度撑破。错误提示默认隐藏，有错再显示。

body {  display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f0f2f5; font-family: system-ui, -apple-system, sans-serif; } form {  width: 320px; padding: 32px 28px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .field {  margin-bottom: 18px; } label {  display: block; font-size: 14px; color: #333; margin-bottom: 6px; } input[type="text"], input[type="password"] {  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; outline: none; transition: border-color 0.2s; } input:focus {  border-color: #1677ff; } .options {  display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 20px; } .options a {  color: #1677ff; text-decoration: none; } button {  width: 100%; padding: 10px; background: #1677ff; color: #fff; border: none; border-radius: 4px; font-size: 15px; cursor: pointer; } button:hover {  background: #0958d9; } button:disabled {  background: #b0b0b0; cursor: not-allowed; } .error {  color: #e53935; font-size: 13px; margin: 10px 0 0; min-height: 18px; } 

JavaScript 这块，前端校验只做基本拦截，真正的验证必须放后端。我见过太多人只靠前端校验，结果用户禁用 JS 就直接绕过。

const form = document.getElementById('loginForm'); const username = document.getElementById('username'); const password = document.getElementById('password'); const errorMsg = document.getElementById('errorMsg'); const submitBtn = form.querySelector('button[type="submit"]'); form.addEventListener('submit', function(e) {  errorMsg.textContent = ''; const user = username.value.trim(); const pass = password.value; if (!user) {  e.preventDefault(); errorMsg.textContent = '请输入用户名'; username.focus(); return; } if (pass.length < 8) {  e.preventDefault(); errorMsg.textContent = '密码至少8位'; password.focus(); return; } // 防止重复提交 submitBtn.disabled = true; submitBtn.textContent = '登录中...'; }); 

几个实际踩过的坑。第一，autocomplete 属性别乱写，username 和 current-password 能让浏览器密码管理器正确识别，用户不用每次手输。第二，错误提示别用 alert，体验差还阻塞线程，用页面内元素显示。第三，提交按钮的 disabled 状态记得在请求失败后恢复，否则用户卡在那儿干瞪眼。

还有一点，如果后端返回错误，比如“密码错误”，前端要能显示出来。通常做法是拦截表单提交，用 fetch 发请求，根据响应码决定跳转还是提示。但那是另一个话题了，先把上面这套跑起来，打开浏览器看看效果，比看十篇文章都管用。