登录页面html代码

一个能用的登录代码登录页面，核心就三样东西：<form>、页面<input>、登录代码一个提交按钮。页面别急着上框架，登录代码原生HTML写出来的页面东西，打开浏览器就能跑，登录代码改起来也快。页面

我见过太多人一上来就堆div，登录代码十几个嵌套，页面最后自己都找不到输入框在哪。登录代码其实结构清晰比什么都重要。页面

骨架先搭好

最外层用<form>包住，登录代码别用div。页面form自带提交行为，登录代码回车键也能触发，省事。给它加上action和method属性，哪怕你现在还没有后端接口，先写上占位。

<form action="/login" method="post"> <h2>登录</h2> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> <button type="submit">登录</button> </form>

注意几个细节。label的for属性必须和input的id对应，点文字也能聚焦输入框，手机上体验差别很大。required属性让浏览器自己做非空校验，不用写一行JS。type="password"会把输入变成圆点，这个不用多解释。

样式别写太复杂

很多人卡在CSS上，调半天觉得丑。其实登录页不需要花哨，居中、留白够、按钮明显，就及格了。

body {  display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #f5f5f5; font-family: system-ui, sans-serif; } form {  background: #fff; padding: 40px 32px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 320px; } input {  width: 100%; padding: 10px 12px; margin: 6px 0 18px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-size: 14px; } button {  width: 100%; padding: 12px; background: #3b82f6; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } button:hover {  background: #2563eb; }

box-sizing: border-box这行不加，输入框会撑出容器，宽度算上padding就超了。min-height: 100vh配合flex，垂直居中才生效。这些坑我踩过不止一次。

加一点交互反馈

纯静态页面点按钮没反应，用户会以为坏了。加个简单的JS拦截，模拟一下提交过程：

<script> document.querySelector('form').addEventListener('submit', function(e) {  e.preventDefault(); const btn = this.querySelector('button'); btn.textContent = '登录中...'; btn.disabled = true; setTimeout(() => {  btn.textContent = '登录'; btn.disabled = false; alert('假装登录成功了'); }, 1500); }); </script>

这段代码没什么技术含量，但用户体验上差别明显。按钮禁用防止重复点击，文字变化给出反馈，哪怕后端还没接，前端看起来是活的。

几个容易忽略的点

输入框的name属性别漏，后端靠它取值。autocomplete属性加上"username"和"current-password"，浏览器能自动填充，省得用户手打。

移动端记得加<meta name="viewport" content="width=device-width, initial-scale=1.0">，不然页面会缩小到看不清。这个标签放在<head>里，写一次管所有页面。

密码框旁边可以加个“显示密码”的切换，用type在password和text之间切。代码不超过五行，但用户输错密码的时候会感谢你。

最后，别把登录页做得太复杂。用户来这就是为了快速进去，动画、背景图、验证码，能少则少。我见过一个登录页加载了2MB的图片，输完密码等三秒才跳转，纯粹是给自己找麻烦。

(责任编辑：时尚)