源码基本信息
- 源码名称：HTML登录+注册页面
- 当前版本：v1.0
- 开发技术：HTML5 + CSS3 + 原生 JavaScript
- 页面类型：前端登录、注册单页模板
- 适用场景：个人网站、后台系统、会员中心和项目演示
页面功能
- 登录与注册表单一键切换。
- 邮箱格式、密码长度等基础前端校验。
- 响应式布局，适配电脑和手机浏览器。
- 无需依赖 jQuery 或其他前端框架。
- 登录和注册提交提示，可对接自己的后端接口。
使用方法
- 将下面的源码保存为
index.html。 - 直接用浏览器打开即可预览登录和注册页面。
- 将表单提交事件替换为 Ajax 或 Fetch 请求，对接实际登录注册接口。
- 生产环境请在服务端再次校验邮箱、密码和用户权限，不要只依赖前端校验。
完整源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录与注册</title>
<style>
* { box-sizing: border-box; }
body {
display: grid;
min-height: 100vh;
margin: 0;
place-items: center;
background: linear-gradient(135deg, #edf4ff, #f9fbff);
color: #1f2937;
font-family: system-ui, -apple-system, "Microsoft YaHei", sans-serif;
}
.auth-card {
width: min(92vw, 420px);
padding: 32px;
border: 1px solid #e5e7eb;
border-radius: 20px;
background: #fff;
box-shadow: 0 18px 50px rgb(31 41 55 / 12%);
}
h1 { margin: 0 0 8px; font-size: 26px; }
.muted { margin: 0 0 24px; color: #6b7280; font-size: 14px; }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.tab {
flex: 1;
padding: 10px;
border: 0;
border-radius: 10px;
background: #f3f4f6;
color: #6b7280;
cursor: pointer;
}
.tab.active { background: #2563eb; color: #fff; }
.field { margin-bottom: 16px; }
label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; }
input {
width: 100%;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
outline: 0;
font-size: 15px;
}
input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.submit {
width: 100%;
padding: 13px;
border: 0;
border-radius: 10px;
background: #2563eb;
color: #fff;
cursor: pointer;
font-size: 15px;
font-weight: 700;
}
.notice { min-height: 22px; margin-top: 14px; color: #2563eb; text-align: center; font-size: 13px; }
[hidden] { display: none !important; }
</style>
</head>
<body>
<main class="auth-card">
<h1 id="formTitle">欢迎登录</h1>
<p class="muted">登录或注册你的账户</p>
<div class="tabs" role="tablist">
<button class="tab active" type="button" data-mode="login">登录</button>
<button class="tab" type="button" data-mode="register">注册</button>
</div>
<form id="authForm">
<div class="field" id="nameField" hidden>
<label for="name">用户名</label>
<input id="name" name="name" autocomplete="username">
</div>
<div class="field">
<label for="email">邮箱</label>
<input id="email" name="email" type="email" autocomplete="email" required>
</div>
<div class="field">
<label for="password">密码</label>
<input id="password" name="password" type="password" minlength="6" autocomplete="current-password" required>
</div>
<button class="submit" id="submitButton" type="submit">登录</button>
<p class="notice" id="notice" aria-live="polite"></p>
</form>
</main>
<script>
const tabs = document.querySelectorAll('.tab');
const nameField = document.querySelector('#nameField');
const formTitle = document.querySelector('#formTitle');
const submitButton = document.querySelector('#submitButton');
const password = document.querySelector('#password');
const notice = document.querySelector('#notice');
let mode = 'login';
tabs.forEach((tab) => tab.addEventListener('click', () => {
mode = tab.dataset.mode;
tabs.forEach((item) => item.classList.toggle('active', item === tab));
nameField.hidden = mode !== 'register';
formTitle.textContent = mode === 'login' ? '欢迎登录' : '创建账户';
submitButton.textContent = mode === 'login' ? '登录' : '注册';
password.autocomplete = mode === 'login' ? 'current-password' : 'new-password';
notice.textContent = '';
}));
document.querySelector('#authForm').addEventListener('submit', (event) => {
event.preventDefault();
notice.textContent = mode === 'login' ? '登录演示成功，请接入后端接口。' : '注册演示成功，请接入后端接口。';
});
</script>
</body>
</html>使用说明
本页面是纯前端示例，表单提交目前只显示演示提示，不会真正创建用户或执行登录。接入项目时，请根据后端接口修改表单提交逻辑，并使用 HTTPS 保护用户数据。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
