How to Create a Stylish Login/Register Form Using HTML and CSS

Written by January 19, 2025 5 min read 0 Comments

Here’s a responsive HTML and CSS design for a Login/Register Form tab interface with the requested color scheme (#4db2ec and #c4364e).

This code creates a responsive login/register tab interface using your specified colors. The tabs switch between the login and register forms, with animations and transitions for a polished look. Let me know if you’d like to add more features or modify it further!

I’ve added labels, validation messages, and improved the form to include real-time validation using the browser’s required attribute. The script handles displaying error messages when inputs are invalid. Let me know if you need further customizations!

Create index.html file and copy code and paste code our layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login/Register Tabs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="tabs">
            <div class="tab active" data-target="login">Login</div>
            <div class="tab" data-target="register">Register</div>
        </div>
        <div class="form-container">
            <form class="form active" id="login" novalidate>
                <div class="form-group">
                    <label for="login-email">Email</label>
                    <input type="email" id="login-email" placeholder="Enter your email" required>
                    <span class="error-message">Please enter a valid email.</span>
                </div>
                <div class="form-group">
                    <label for="login-password">Password</label>
                    <input type="password" id="login-password" placeholder="Enter your password" required>
                    <span class="error-message">Password is required.</span>
                </div>
                <button type="submit">Login</button>
            </form>
            <form class="form" id="register" novalidate>
                <div class="form-group">
                    <label for="register-username">Username</label>
                    <input type="text" id="register-username" placeholder="Enter your username" required>
                    <span class="error-message">Username is required.</span>
                </div>
                <div class="form-group">
                    <label for="register-email">Email</label>
                    <input type="email" id="register-email" placeholder="Enter your email" required>
                    <span class="error-message">Please enter a valid email.</span>
                </div>
                <div class="form-group">
                    <label for="register-phone">Phone Number</label>
                    <input type="phone" id="register-phone" placeholder="Enter your Phone" required>
                    <span class="error-message">Please enter a valid Phone Number.</span>
                </div>
                <div class="form-group">
                    <label for="register-password">Password</label>
                    <input type="password" id="register-password" placeholder="Enter your password" required>
                    <span class="error-message">Password is required.</span>
                </div>
                <button type="submit">Register</button>
            </form>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

You will also like this post

Create style.css file and copy code and paste code our layout.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #4db2ec54;
}

.container {
    width: 350px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tabs {
    display: flex;
    justify-content: space-around;
    background: #4db2ec;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 15px 0;
    cursor: pointer;
    color: white;
    font-weight: bold;
    transition: background 0.3s;
}

.tab.active {
    background: #c4364e;
}

.form-container {
    padding: 20px;
}

.form {
    display: none;
}

.form.active {
    display: block;
}

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

.form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.form input:invalid {
    border-color: #c4364e;
}

.form input:focus {
    border-color: #4db2ec;
    outline: none;
}

.form button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #4db2ec;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.form button:hover {
    background: #c4364e;
}

.error-message {
    color: #c4364e;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.error-message.visible {
    display: block;
}

Create script.js file and copy code and paste code our layout.

const tabs = document.querySelectorAll('.tab');
const forms = document.querySelectorAll('.form');

tabs.forEach(tab => {
    tab.addEventListener('click', () => {
        tabs.forEach(t => t.classList.remove('active'));
        forms.forEach(f => f.classList.remove('active'));

        tab.classList.add('active');
        document.getElementById(tab.dataset.target).classList.add('active');
    });
});

// Form validation
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', e => {
        const inputs = form.querySelectorAll('input');
        let isValid = true;

        inputs.forEach(input => {
            const errorMessage = input.nextElementSibling;
            if (!input.value.trim()) {
                isValid = false;
                errorMessage.textContent = `${input.placeholder} is required.`;
                errorMessage.classList.add('visible');
            } else if (!input.checkValidity()) {
                isValid = false;
                errorMessage.textContent = `Invalid ${input.placeholder.toLowerCase()}.`;
                errorMessage.classList.add('visible');
            } else {
                errorMessage.classList.remove('visible');
            }
        });

        if (!isValid) {
            e.preventDefault();
        }
    });
});

I’ve updated the script to display error messages if a required field is left empty or contains invalid input. Each error message will specify the issue and show dynamically near the input field. Let me know if you need additional adjustments!

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

About the Author

You will also like this post

Related Posts