Membuat Form Login dengan HTML dan CSS

Form login adalah suatu form yang biasa digunakan untuk proses login. Fungsinya adalah sebelum memasukin halaman tertentu, user akan dihadapkan form login untuk mengecek apakah termasuk dalam member suatu website. Sehingga tidak sembarang user dapat memasuki halaman tertentu jika belum terdaftar. Mendesign tampilan form menjadi hal yang cukup memiliki peran agar tidak membuat user bingung saat dihadapkan halaman form login. Sesuai dengan pembahasan kita kali ini adalah bagaimana cara membuat form login dengan HTML dan CSS.

Form login biasanya terdiri atas minimal 2 kolom yang harus diperiksa pada database. Yang pertama adalah kolom untuk usernama atau email, lalu yang kedua adalah password. Cara kerjanya adalah mencocokan username dan password tersebut pada database apaka tersedia atau tidak. Lalu sekarang kita mulai mendesing tampilan form login agar terlihat menarik. Kalian bisa ikuti langkah-langkah berikut ini. Pertama buat kerangka htmlnya terlebih dahulu, agar mempersingkat waktu kalian bisa salin contoh code berikut ini.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php">  

  <div class="container">
    <label><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit">Login</button>
    <input type="checkbox" checked="checked"> Remember me
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>

style.css

form {
    border: 3px solid #f1f1f1;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

Setelah sudah kalian simpan kedua file tersebut sesuai dengan formatnya masing-masing. Dan jangan lupa untuk menyimpan filenya dalam satu folder. Jika berhasil maka hasilnya akan seperti ini.