Crafting a Login and Registration Form with HTML, CSS, and JavaScript

In this blog post, we'll dive into the essentials of crafting a seamless login and registration experience using HTML, CSS, and JavaScript. Get ready to elevate your web development skills and create forms that not only function beautifully but also captivate users at first glance!

Watch on YouTube

HTML

                    

                        content_copy
                        copy
                    

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register & LogIn</title>

    <link rel="stylesheet" href="../css/style.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&" />
</head>
<body>
    <div class="container">
        <div class="login-container">
            <h1>Log In</h1>
            <form action="" id="login-form">
                <fieldset>
                    <input type="text" name="user-name" required>
                    <label for="user-name">UserName</label>
                    <span class="material-symbols-outlined"> person </span>
                </fieldset>
                <fieldset>
                    <input type="password" name="password" required>
                    <label for="password">Password</label>
                    <span class="material-symbols-outlined"> lock </span>
                </fieldset>
                <button id="login-btn">Log In</button>
            </form>
            <div class="call-container">
                <p>Don't have an account</p>
                <button id="register-call-btn">Register</button>
            </div>
        </div>
        <div class="register-container">
            <h1>Register</h1>
            <form action="" id="register-form">
                <fieldset>
                    <input type="email" name="email" required>
                    <label for="email">Email</label>
                    <span class="material-symbols-outlined"> mail </span>
                </fieldset>
                <fieldset>
                    <input type="text" name="user-name" required>
                    <label for="user-name">UserName</label>
                    <span class="material-symbols-outlined"> person </span>
                </fieldset>
                <fieldset>
                    <input type="password" name="password" required>
                    <label for="password">Password</label>
                    <span class="material-symbols-outlined"> lock </span>
                </fieldset>
                <button id="register-btn">Register</button>
            </form>
            <div class="call-container">
                <p>Don't have an account</p>
                <button id="login-call-btn">Log In</button>
            </div>
        </div>
    </div>
</body>

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

CSS

                    

                        content_copy
                        copy
                    

                    
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

:root{
    --color1: #f8f6ff;
    --color2: #76dc95;
    --color3:#ff7473;
    --color4: #393c40;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color4);
}
.container{
    width: 450px;
    height: 550px;
    border: 2px solid var(--color1);
    border-radius: 10px;
    box-shadow: 0 0 10px 0px var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    transition: 2s;
    transform-style: preserve-3d;
}
h1{
    font-size: 50px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--color3);
}
form{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
form fieldset{
    position: relative;
    border: none;
    padding: 10px;
}
form fieldset label{
    position: absolute;
    left: 10px;
    top: 25px;
    font-size: 16px;
    pointer-events: none;
    transition: 0.5s;
    color: var(--color1);
}
form fieldset span{
    position: absolute;
    top: 20px;
    right: 10px;
    color: var(--color1);
    transition: 0.5s ease-in-out;
}
form input{
    width: 300px;
    height: 40px;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--color1);
    background-color: transparent;
    font-size: 16px;
    padding: 15px 20px 0px 0;
    color: var(--color2);
    transition: 0.5s ease-in-out;
}

fieldset input:focus~label,
fieldset input:valid~label{
    top: 0px;
    color: var(--color2);
}

fieldset input:focus~span,
fieldset input:valid~span{
    color: var(--color2);
}

fieldset input:focus,
fieldset input:valid{
    border-bottom: 2px solid var(--color2);
}

button{
    width: 300px;
    height: 40px;
    outline: none;
    border: 2px solid var(--color1);
    border-radius: 50px;
    font-size: 20px;
    color: var(--color1);
    background-color: var(--color3);
    transition: 0.5s ease-in-out;
}
#login-btn, #register-btn{
    margin-top: 30px;
}
button:hover{
    background-color: transparent;
}
.call-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}
.call-container p{
    font-size: 16px;
    color: var(--color1);
}

.register-container, .login-container{
    position: absolute;
    backface-visibility: hidden;
}

.register-container{
    transform: rotateY(180deg);
}

JavaScript

                    

                        content_copy
                        copy
                    

                    let container = document.querySelector('.container');
let registerCallBtn = document.querySelector("#register-call-btn");
let loginCallBtn = document.querySelector("#login-call-btn");

registerCallBtn.addEventListener('click', ()=> {
    container.style.transform = 'rotateY(180deg)';
});

loginCallBtn.addEventListener('click', ()=> {
    container.style.transform = 'rotateY(0deg)';
});