html sign in form with javascript validation

0

Features
Clean, Minimalist Design:

  • Simple white card with subtle shadow
  • Rounded corners (8px for inputs, 12px for container)
  • Modern font (Inter) with proper hierarchy
  • Adequate spacing and padding

Responsive Layout:

  • Works on mobile and desktop
  • Adjusts padding for smaller screens

Form Validation:

  • Checks for empty fields
  • Validates email format
  • Ensures password is at least 6 characters
  • Error messages appear below each field in red

User Experience:

  • Clear focus states for inputs
  • Hover effect on button
  • Helpful placeholder text
  • Immediate feedback on errors

No Frameworks:

  • Pure HTML, CSS, and vanilla JavaScript
  • No Bootstrap or other libraries

The design follows modern web standards with a focus on usability and aesthetics. The form is centered on the page with a clean, uncluttered appearance.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sign In</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet"> </head> <body> <div class="signin-container"> <div class="signin-header"> <h1>Welcome back</h1> <p>Sign in to your account to continue</p> </div> <form id="signinForm"> <div class="form-group"> <label for="email">Email</label> <input type="text" id="email" name="email" placeholder="Enter your email"> <div id="emailError" class="error-message">Please enter a valid email address</div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password"> <div id="passwordError" class="error-message">Password must be at least 6 characters</div> </div> <button type="submit" class="signin-button">Sign In</button> </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: 'Inter', sans-serif;
        }

        body {
            background-color: #f8fafc;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .signin-container {
            background-color: white;
            width: 100%;
            max-width: 400px;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .signin-header {
            margin-bottom: 32px;
            text-align: center;
        }

        .signin-header h1 {
            font-size: 24px;
            font-weight: 500;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .signin-header p {
            color: #64748b;
            font-size: 14px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #1e293b;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
            background-color: #f8fafc;
        }

        .form-group input:focus {
            outline: none;
            border-color: #94a3b8;
            background-color: white;
        }

        .error-message {
            color: #dc2626;
            font-size: 12px;
            margin-top: 6px;
            display: none;
        }

        .signin-button {
            width: 100%;
            padding: 12px;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-top: 8px;
        }

        .signin-button:hover {
            background-color: #1d4ed8;
        }

        @media (max-width: 480px) {
            .signin-container {
                padding: 30px 20px;
            }
        }
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('signinForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Reset error messages
            document.getElementById('emailError').style.display = 'none';
            document.getElementById('passwordError').style.display = 'none';
            
            // Get form values
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value.trim();
            
            // Validate email
            let isValid = true;
            
            if (!email) {
                document.getElementById('emailError').textContent = 'Email is required';
                document.getElementById('emailError').style.display = 'block';
                isValid = false;
            } else if (!isValidEmail(email)) {
                document.getElementById('emailError').textContent = 'Please enter a valid email address';
                document.getElementById('emailError').style.display = 'block';
                isValid = false;
            }
            
            // Validate password
            if (!password) {
                document.getElementById('passwordError').textContent = 'Password is required';
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            } else if (password.length < 6) {
                document.getElementById('passwordError').textContent = 'Password must be at least 6 characters';
                document.getElementById('passwordError').style.display = 'block';
                isValid = false;
            }
            
            // If form is valid, submit it
            if (isValid) {
                // In a real application, you would submit the form to a server here
                alert('Sign in successful!');
                // this.submit();
            }
        });
        
        function isValidEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
We hope you would like this Calculator using html css and javascript code
Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

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