登录表单设计 — HTML/CSS 初学者项目教程

📖 教程步骤

1 HTML 表单结构

创建 <form> 元素，包含标题、邮箱/密码输入框、记住我选项、登录按钮和注册链接。使用 required 属性进行基本的表单验证。

<form class="login-form">
    <h2>Welcome Back</h2>
    <div class="field">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="[email protected]" required>
    </div>
    <div class="field">
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="••••••••" required>
    </div>
    <button type="submit">Sign In</button>
</form>

2 毛玻璃背景（Glassmorphism）

使用 backdrop-filter: blur() 实现毛玻璃效果，结合半透明背景和细边框，营造高级质感。

.login-form {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
}

3 输入框样式

将输入框设为深色半透明背景，白色文字。聚焦时边框变为紫色，配合 transition 实现平滑过渡。使用 :user-invalid 伪类在用户输入无效时显示红色边框。

input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.6rem;
    color: white;
    outline: none;
    transition: border-color 0.2s;
}
input:focus { border-color: #a78bfa; background: rgba(255,255,255,0.1); }
input:user-invalid { border-color: #f87171; }

4 按钮样式

使用渐变背景的登录按钮，悬停时降低不透明度，点击时略带缩放效果，让交互反馈更自然。

button {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 0.6rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}
button:hover { opacity: 0.9; }
button:active { transform: scale(0.98); }

5 完成！

现在你有了一个漂亮的毛玻璃登录表单，全部使用纯 HTML + CSS 实现。支持输入验证提示，无需任何 JavaScript 代码。

💡 扩展想法：添加密码显示/隐藏切换（用 checkbox + ~ 选择器）、社交登录按钮、或者添加加载动画状态。

🔐 登录表单设计

Welcome Back

📖 教程步骤