Login & Registration Form

Login & Registration Form | Project

Halo! Hari ini saya membuat project tentang form login dan registrasi. Sebenarnya ini sama saja dengan yang blog materi HTML Form itu, tapi yang ini lebih lengkap dengan tambahan form login.

Versi yang baru ini lebih bagus dari versi yang lama dengan UI-nya yang lebih elegen serta fitur redirect untuk login di bagian kanan atas. Versi ini mengurangi tujuh jenis input menjadi tiga, yaitu hanya email, username, dan password. Untuk password-nya sendiri, akan dicek apakah password-nya minimal 8 karakter.

Untuk bagian login-nya, terdapat redirect untuk registrasi di kanan atas juga serta di bawah tombol "Masuk". Di sini juga terdapat link jika pengguna lupa password-nya. Untuk inputnya sendiri hanya ada dua, yaitu yang atas untuk email atau username, dan yang bawah untuk password.

Tidak lupa juga, UI kedua form ini saya mengambil inspirasi dari beberapa website seperti Roblox, Pixiv, Twitter (X), dan Github.

Itu saja untuk blog ini tentang project login dan registration form. Sampai jumpa di blog berikutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form - Bimas</title>
    <style>
        body {
            background-image: url("https://i.ibb.co.com/fYPY5Ls/hex-gradient-bg.png");
            margin-top: 0px;
        }
        h1 {
            font-family: Arial;
            text-align: center;
        }
        a {
            font-family: Arial;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .signin-container {
            display: flex;
            height: 6vh;
            justify-content: flex-end;
            margin-top: 1%;
            width: 100%;
        }
        .signin-redirect {
            align-items: center;
            background-color: white;
            border: 2px solid black;
            border-radius: 6px;
            display: flex;
            font-family: Arial;
            height: inherit;
            justify-content: center;
            margin-right: 3%;
            opacity: 90%;
            user-select: none;
            width: 100px;
        }
        .signin-redirect:hover {
            cursor: pointer;
        }
        .form-container {
            background-color: white;
            border: 2px solid black;
            border-radius: 30px;
            margin: 0px auto 10px;
            min-height: 79vh;
            max-height: 81vh;
            padding: 20px;
            width: 30%;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin: auto;
            width: 90%;
        }
        .form-text {
            font-size: 1.6vw;
            font-weight: 600;
        }
        .form-input {
            background-color: rgb(245, 245, 245);
            border: 1px solid black;
            border-radius: 6px;
            height: 6vh;
        }
        .form-submit {
            height: 8vh;
            margin: auto;
            width: 80%;
        }
        #submit-button {
            background-color: rgb(210, 210, 210);
            border: 2px solid rgb(50, 50, 50);
            border-radius: 10px;
            font-family: Arial;
            height: inherit;
            width: 100%;
        }
        #submit-button:hover {
            background-color: rgb(165, 165, 165);
        }
        .signin-text-container {
            font-family: Arial;
            margin: 5% auto;
            text-align: center;
            width: 80%;
        }
    @media only screen and (max-width: 768px) {
        h1 {
            font-family: Arial;
            font-size: 8vw;
            text-align: center;
        }
        .signin-container {
            display: flex;
            height: 4vh;
            justify-content: flex-end;
            margin-top: 3%;
            width: 100%;
        }
        .signin-redirect {
            align-items: center;
            background-color: white;
            border: 2px solid black;
            border-radius: 6px;
            display: flex;
            font-family: Arial;
            font-size: 3.5vw;
            height: inherit;
            justify-content: center;
            margin-right: 3%;
            opacity: 90%;
            user-select: none;
            width: 150px;
        }
        .form-container {
            background-color: white;
            border: 2px solid black;
            border-radius: 30px;
            margin: 5% auto;
            min-height: 44vh;
            padding: 20px;
            width: 80%;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin: auto;
            min-height: 26vh;
            width: 90%;
        }
        .form-text {
            font-size: 5.3vw;
            font-weight: 600;
        }
        .form-input {
            background-color: rgb(245, 245, 245);
            border: 1px solid black;
            border-radius: 6px;
            font-size: 4.5vw;
            height: 3.8vh;
        }
        .forgot-password {
            font-size: 4.3vw;
        }
        .form-submit {
            height: 5vh;
            margin: auto;
            width: 80%;
        }
        #submit-button {
            background-color: rgb(210, 210, 210);
            border: 2px solid rgb(50, 50, 50);
            border-radius: 10px;
            font-size: 4.5vw;
            height: inherit;
            width: 100%;
        }
        .signin-text-container {
            font-family: Arial;
            font-size: 4.3vw;
            margin: 5% auto;
            text-align: center;
            width: 80%;
        }
    }
    </style>
</head>
<body>
    <div class="signin-container">
        <div class="signin-redirect" onclick="signinRedirect()">
            <p>Sign in</p>
        </div>
    </div>
    <div class="form-container">
        <h1>Form Login</h1>
        <form autocomplete="off">
            <div class="form-group">
                <span class="form-text">Username/Email</span>
                <input type="text" class="form-input" name="email" placeholder="Masukkan username atau email" required><br><br>
                <span class="form-text">Password</span>
                <input type="text" class="form-input" name="password" placeholder="Masukkan password" required>
                <a class="forgot-password" href="https://i.pinimg.com/736x/54/38/a7/5438a7ccf8d12c67ef3aa812cacda568.jpg">Lupa password?</a>
                </p><br><br>
            </div>
            <div class="form-submit">
                <input id="submit-button" type="submit" value="Masuk"><br>
            </div>
            <div class="signin-text-container">
                <p>Belum punya akun? <a href="registration_form.html">Daftar sekarang</a></p>
            </div>
        </form>
    </div>

    <script>
        function signinRedirect() {
            window.location.href = "registration_form.html";
        }
    </script>
</body>
</html>

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form - Bimas</title>
    <style>
        body {
            background-image: url("https://i.ibb.co.com/fYPY5Ls/hex-gradient-bg.png");
            margin-top: 0px;
        }
        h1 {
            font-family: Arial;
            text-align: center;
        }
        .login-container {
            display: flex;
            height: 6vh;
            justify-content: flex-end;
            margin-top: 1%;
            width: 100%;
        }
        .login-redirect {
            align-items: center;
            background-color: white;
            border: 2px solid black;
            border-radius: 6px;
            display: flex;
            font-family: Arial;
            height: inherit;
            justify-content: center;
            margin-right: 3%;
            opacity: 90%;
            user-select: none;
            width: 100px;
        }
        .login-redirect:hover {
            cursor: pointer;
        }
        .form-container {
            background-color: white;
            border: 2px solid black;
            border-radius: 30px;
            margin: 0px auto 10px;
            min-height: 79vh;
            max-height: 81vh;
            padding: 20px;
            width: 30%;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin: auto;
            width: 90%;
        }
        .form-text {
            font-size: 1.6vw;
            font-weight: 600;
        }
        .form-input {
            background-color: rgb(245, 245, 245);
            border: 1px solid black;
            border-radius: 6px;
            height: 6vh;
        }
        #password-error {
            color: rgb(220, 0, 0);
            margin-top: 2px;
        }
        .form-submit {
            height: 8vh;
            margin: auto;
            width: 80%;
        }
        #submit-button {
            background-color: rgb(210, 210, 210);
            border: 2px solid rgb(50, 50, 50);
            border-radius: 10px;
            font-family: Arial;
            height: inherit;
            width: 100%;
        }
        #submit-button:hover {
            background-color: rgb(165, 165, 165);
        }
    @media only screen and (max-width: 768px) {
        h1 {
            font-family: Arial;
            font-size: 8vw;
            text-align: center;
        }
        .login-container {
            display: flex;
            height: 4vh;
            justify-content: flex-end;
            margin-top: 3%;
            width: 100%;
        }
        .login-redirect {
            align-items: center;
            background-color: white;
            border: 2px solid black;
            border-radius: 6px;
            display: flex;
            font-family: Arial;
            font-size: 3.5vw;
            height: inherit;
            justify-content: center;
            margin-right: 3%;
            opacity: 90%;
            user-select: none;
            width: 150px;
        }
        .form-container {
            background-color: white;
            border: 2px solid black;
            border-radius: 30px;
            margin: 5% auto;
            min-height: 46vh;
            padding: 20px;
            width: 80%;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin: auto;
            min-height: 26vh;
            width: 90%;
        }
        .form-text {
            font-size: 5.3vw;
            font-weight: 600;
        }
        .form-input {
            background-color: rgb(245, 245, 245);
            border: 1px solid black;
            border-radius: 6px;
            font-size: 4.5vw;
            height: 3.8vh;
        }
        #password-error {
            color: rgb(220, 0, 0);
            font-size: 4.5vw;
            margin-top: 2px;
        }
        .form-submit {
            height: 5vh;
            margin: auto;
            width: 80%;
        }
        #submit-button {
            background-color: rgb(210, 210, 210);
            border: 2px solid rgb(50, 50, 50);
            border-radius: 10px;
            font-size: 4.5vw;
            height: inherit;
            width: 100%;
        }
    }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-redirect" onclick="loginRedirect()">
            <p>Log in</p>
        </div>
    </div>
    <div class="form-container">
        <h1>Form Registrasi</h1>
        <form autocomplete="off">
            <div class="form-group">
                <span class="form-text">Email</span>
                <input type="text" class="form-input" name="email" placeholder="Masukkan email" required><br><br>
                <span class="form-text">Username</span>
                <input type="text" class="form-input" name="username" placeholder="Masukkan username" required><br><br>
                <span class="form-text">Password</span>
                <input type="text" class="form-input" name="password" placeholder="Masukkan password" required oninput="checkPasswordLength()"><p id="password-error"><br></p><br><br>
            </div>
            <div class="form-submit">
                <input id="submit-button" type="submit" value="Daftar"><br>
            </div>
        </form>
    </div>

    <script>
        function checkPasswordLength() {
            const passwordValue = document.getElementsByClassName("form-input")[2].value;
            const errorMessage = document.getElementById("password-error");

            if (passwordValue.length >= 8) {
                errorMessage.innerHTML = "<br>";
            } else {
                errorMessage.innerHTML = "Password minimal 8 karakter";
            }
        }

        function loginRedirect() {
            window.location.href = "login_form.html";
        }
    </script>
</body>
</html>

Brillianta Febimas Winawan

Search This Blog

Login & Registration Form | Project

Labels

Comments

Post a Comment

Popular posts from this blog

Borders | CSS

Validasi Input | JavaScript

Pengenalan JSON