Membuat Desain Form Login HTML dengan CSS (Step by Step) – Kelas Programmer | Tempat Panduan Belajar Membuat Website Profesional

Form login adalah salah satu elemen penting dalam website, khususnya untuk sistem yang memiliki autentikasi pengguna. Dengan kombinasi HTML dan CSS, kita bisa membuat desain form login yang sederhana, modern, bahkan responsive agar nyaman digunakan di berbagai perangkat.

Table of Contents

2. Membuat Struktur Dasar 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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="input-box">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-box">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

3. Menambahkan CSS untuk Styling Form


/* style.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 350px;
}

.login-box h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}

.input-box {
  position: relative;
  margin-bottom: 20px;
}

.input-box input {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #ccc;
  outline: none;
  font-size: 16px;
  background: transparent;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 0;
  color: #888;
  pointer-events: none;
  transition: 0.3s;
  transform: translateY(-50%);
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: -5px;
  color: #3498db;
  font-size: 12px;
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  background: #3498db;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #2980b9;
}

4. Membuat Form Login Responsive


@media (max-width: 480px) {
  .login-box {
    width: 90%;
    padding: 25px;
  }
}

Dengan tambahan media query di atas, form login akan otomatis menyesuaikan ukuran layar, terutama pada perangkat mobile.

5. Contoh Lengkap Kode HTML + CSS

Berikut contoh kode HTML dan CSS yang bisa langsung digunakan:


<!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>
    /* Masukkan CSS dari bagian sebelumnya */
  </style>
</head>
<body>
  <div class="login-box">
    <h2>Login</h2>
    <form>
      <div class="input-box">
        <input type="text" required>
        <label>Username</label>
      </div>
      <div class="input-box">
        <input type="password" required>
        <label>Password</label>
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

6. Tips Mendesain Form Login

Gunakan warna kontras agar input lebih jelas terlihat.
Pastikan tombol login cukup besar dan mudah ditekan.
Tambahkan hover effect pada tombol untuk efek interaktif.
Selalu uji desain di berbagai perangkat (mobile, tablet, desktop).

7. FAQ

Q: Apakah form login ini sudah aman?
A: Tidak, ini hanya desain tampilan. Untuk keamanan perlu ditambahkan backend dan enkripsi data.

Q: Bisa ditambahkan logo di form login?
A: Bisa, cukup tambahkan elemen <img> di dalam .login-box.

Q: Apakah bisa digabung dengan framework CSS?
A: Ya, bisa. Misalnya menggunakan Bootstrap untuk grid system agar lebih fleksibel.