Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Belajar CSS

CSS : Membuat Login Form

Posting Komentar

Membuat login form merupakan salah satu langkah dasar dalam pengembangan aplikasi web. Melalui login form, pengguna dapat mengakses halaman tertentu dengan memasukkan username dan password yang valid. Login form tidak hanya berfungsi sebagai pintu masuk ke sistem, tetapi juga sebagai lapisan keamanan untuk melindungi data pengguna.
Pada Kesempatan kali ini, kita akan mempelajari cara membuat form login dengan HTML dan CSS.

Struktur Folder

.
└── auth/
    └── login.html

Membuat File HTML

Berikut adalah isi dari file login.html

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Login</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .login-container {
      background: #ffffff;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 320px;
      text-align: center;
    }

    .login-container h2 {
      margin-bottom: 25px;
      color: #333;
      font-weight: 600;
    }

    .input-group {
      margin-bottom: 18px;
      text-align: left;
    }

    .input-group label {
      display: block;
      font-size: 14px;
      color: #444;
      margin-bottom: 5px;
    }

    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
      transition: border-color 0.3s;
      box-sizing: border-box;
    }

    .input-group input:focus {
      border-color: #5a9bd4;
    }

    .options-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      font-size: 13px;
    }

    .remember-me {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #444;
    }

    .forgot-link {
      text-decoration: none;
      color: #5a9bd4;
    }

    .forgot-link:hover {
      text-decoration: underline;
    }

    .login-btn {
      width: 100%;
      padding: 10px;
      border: none;
      background-color: #5a9bd4;
      color: white;
      font-size: 15px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .login-btn:hover {
      background-color: #4a8ac4;
    }

    .footer-text {
      margin-top: 15px;
      font-size: 13px;
      color: #555;
    }

    .footer-text a {
      color: #5a9bd4;
      text-decoration: none;
    }

    .footer-text a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="login-container">
    <h2>Login</h2>
    <form action="#" method="post">

      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" id="username" name="username" required>
      </div>

      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required>
      </div>

      <div class="options-row">
        <label class="remember-me">
          <input type="checkbox"> Remember me
        </label>
        <a href="#" class="forgot-link">Lupa password?</a>
      </div>

      <button type="submit" class="login-btn">Masuk</button>
    </form>

    <div class="footer-text">
      Belum punya akun? <a href="#">Daftar</a>
    </div>
  </div>
</body>
</html>

Setelah itu, silakan lihat hasil tampilan dari kode yang sudah kita buat.

Latihan

Silakan pelajari kembali kode yang telah kita buat dan kembangkan dengan menambahkan halaman pendaftaran serta halaman reset password. Setelah itu, silakan lanjutkan dengan mengerjakan bagian berikut :

  • Membuat file CSS eksternal untuk tampilan halaman login, pendaftaran, dan reset password
  • Membuat halaman pendaftaran
  • Membuat halaman reset password

Untuk mengerjakan latihan ini, silakan membuat struktur folder seperti berikut : 

.
└── auth/
    ├── assets/
    │   └── css/
    │       └── form.css
    ├── login.html
    ├── register.html
    └── forgot-password.html

Posting Komentar untuk "CSS : Membuat Login Form"