Modelo de formulário de login HTML CSS

1111 webleb

Abrir no Editor Video Publique Seu Código

Recomendado

23 July 2025

Modelo HTML CSS de cartão de perfil neumórfico

23 August 2025

Soluções de tecnologia: Web, aplicativos, nuvem, IA e segurança cibernética

10 April 2025

Um código de cleanbug411

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
            color: #333;
        }

/* Form Container Styling */
        .login-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box; /* Include padding in width */
        }

.login-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
            position: relative;
            padding-bottom: 10px;
        }

.login-container h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #9b59b6;
            border-radius: 5px;
        }

/* Input Group Styling */
        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

.input-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 16px;
        }

.input-group input[type="text"],
        .input-group input[type="password"] {
            width: calc(100% - 20px); /* Account for padding */
            padding: 12px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

.input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #9b59b6;
            outline: none;
            box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
        }

/* Remember Me & Forgot Password */
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

.remember-forgot label {
            display: flex;
            align-items: center;
            color: #555;
            cursor: pointer;
        }

.remember-forgot input[type="checkbox"] {
            margin-right: 8px;
            accent-color: #9b59b6; /* Custom color for checkbox */
        }

.remember-forgot a {
            color: #71b7e6;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.remember-forgot a:hover {
            color: #9b59b6;
        }

/* Submit Button */
        button[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #71b7e6;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

button[type="submit"]:hover {
            background-color: #9b59b6;
            transform: translateY(-2px);
        }

button[type="submit"]:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

/* Register Link */
        .register-link {
            margin-top: 25px;
            font-size: 15px;
            color: #555;
        }

.register-link a {
            color: #71b7e6;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

.register-link a:hover {
            color: #9b59b6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="#" method="POST">
            <div class="input-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="remember-forgot">
                <label>
                    <input type="checkbox" name="remember-me"> Remember me
                </label>
                <a href="#">Forgot Password?</a>
            </div>
            <button type="submit">Login</button>
            <div class="register-link">
                Don't have an account? <a href="#">Register here</a>
            </div>
        </form>
    </div>
</body>
</html>

Recomendado

Modelo HTML CSS de cartão de perfil neumórfico

Soluções de tecnologia: Web, aplicativos, nuvem, IA e segurança cibernética

Um código de cleanbug411

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS