Responsive Simple login form with form validation using HTML and CSS Code

0

Clean, modern design with a gradient background and card-style form, Responsive layout that works on both desktop and mobile devices, Form validation for username and password fields, Visual feedback with focus states and error messages, Additional elements like "Remember me" checkbox and "Forgot password" link, Sign up link for new users

<!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> </head> <body> <div class="login-container"> <div class="login-header"> <h1>Welcome Back</h1> <p>Please sign in to your account</p> </div> <form id="loginForm"> <div class="form-group"> <label for="username">Username or Email</label> <input type="text" id="username" name="username" required> <div class="error-message" id="usernameError">Please enter a valid username or email</div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" required> <div class="error-message" id="passwordError">Password must be at least 6 characters</div> </div> <div class="remember-forgot"> <div class="remember-me"> <input type="checkbox" id="remember" name="remember"> <label for="remember">Remember me</label> </div> <a href="#" class="forgot-password">Forgot password?</a> </div> <button type="submit" class="login-button">Sign In</button> <div class="signup-link"> Don't have an account? <a href="#">Sign up</a> </div> </form> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 

* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        

        body {

            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

            padding: 20px;

        }

        

        .login-container {

            background-color: white;

            border-radius: 10px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

            width: 100%;

            max-width: 400px;

            padding: 40px 30px;

        }

        

        .login-header {

            text-align: center;

            margin-bottom: 30px;

        }

        

        .login-header h1 {

            color: #333;

            font-size: 28px;

            font-weight: 600;

            margin-bottom: 10px;

        }

        

        .login-header p {

            color: #777;

            font-size: 14px;

        }

        

        .form-group {

            margin-bottom: 20px;

        }

        

        .form-group label {

            display: block;

            margin-bottom: 8px;

            color: #555;

            font-weight: 500;

        }

        

        .form-group input {

            width: 100%;

            padding: 12px 15px;

            border: 1px solid #ddd;

            border-radius: 5px;

            font-size: 16px;

            transition: border 0.3s;

        }

        

        .form-group input:focus {

            border-color: #6a11cb;

            outline: none;

            box-shadow: 0 0 0 2px rgba(106, 17, 203, 0.2);

        }

        

        .remember-forgot {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 20px;

            font-size: 14px;

        }

        

        .remember-me {

            display: flex;

            align-items: center;

        }

        

        .remember-me input {

            margin-right: 5px;

        }

        

        .forgot-password {

            color: #6a11cb;

            text-decoration: none;

        }

        

        .forgot-password:hover {

            text-decoration: underline;

        }

        

        .login-button {

            width: 100%;

            padding: 12px;

            background: linear-gradient(to right, #6a11cb, #2575fc);

            border: none;

            border-radius: 5px;

            color: white;

            font-size: 16px;

            font-weight: 600;

            cursor: pointer;

            transition: opacity 0.3s;

        }

        

        .login-button:hover {

            opacity: 0.9;

        }

        

        .signup-link {

            text-align: center;

            margin-top: 20px;

            font-size: 14px;

            color: #555;

        }

        

        .signup-link a {

            color: #6a11cb;

            text-decoration: none;

            font-weight: 500;

        }

        

        .signup-link a:hover {

            text-decoration: underline;

        }

        

        .error-message {

            color: #e74c3c;

            font-size: 14px;

            margin-top: 5px;

            display: none;

        }

        

        @media (max-width: 480px) {

            .login-container {

                padding: 30px 20px;

            }

            

            .remember-forgot {

                flex-direction: column;

                align-items: flex-start;

            }

            

            .forgot-password {

                margin-top: 10px;

            }

        }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


        document.getElementById('loginForm').addEventListener('submit', function(e) {

            e.preventDefault();

            

            const username = document.getElementById('username').value;

            const password = document.getElementById('password').value;

            const usernameError = document.getElementById('usernameError');

            const passwordError = document.getElementById('passwordError');

            

            // Reset error messages

            usernameError.style.display = 'none';

            passwordError.style.display = 'none';

            

            let isValid = true;

            

            // Validate username (simple check for non-empty)

            if (username.trim() === '') {

                usernameError.style.display = 'block';

                isValid = false;

            }

            

            // Validate password (at least 6 characters)

            if (password.length < 6) {

                passwordError.style.display = 'block';

                isValid = false;

            }

            

            if (isValid) {

                // In a real application, you would send the data to a server here

                alert('Login successful! (This is a demo)');

                // Reset form

                this.reset();

            }

        });
We hope you Like this Post Thanks for coming Here

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied