Cara Membuat Halaman Login Sederhana dengan HTML dan CSS untuk Pemula

Juni 25, 2025 Posting Komentar

Cara Membuat Halaman Login Sederhana dengan HTML & CSS

Hai sobat ngoding! 👋 Di tutorial kali ini, kita akan belajar cara membuat halaman login sederhana menggunakan HTML dan CSS. Cocok banget untuk kamu yang baru mulai belajar pemrograman web.

🔍 Apa yang Akan Kita Buat?

Desain login yang akan kita buat seperti ini:

📄 Struktur HTML

Kita mulai dengan struktur dasar HTML-nya. Copy kode berikut:


<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form Sederhana</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button type="submit">Masuk</button>
    </form>
  </div>
</body>
</html>

🎨 CSS untuk Styling

Selanjutnya, tambahkan CSS berikut agar tampilan login kamu jadi lebih menarik:


body {
  font-family: Arial, sans-serif;
  background: linear-gradient(#4e54c8, #8f94fb);
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  width: 300px;
}
.login-container h2 {
  margin-bottom: 20px;
  text-align: center;
}
.login-container input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #4e54c8;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.login-container button:hover {
  background-color: #3b3f9e;
}

📌 Catatan

Kamu bisa mengembangkan halaman login ini dengan menambahkan validasi JavaScript, menyimpan data ke database, atau menghubungkannya ke backend seperti PHP atau Node.js.

🧠 Kesimpulan

Itu dia cara membuat form login sederhana dengan HTML dan CSS. Simpel tapi berguna untuk latihan dasar pemrograman web. Selamat mencoba dan semangat belajar!

Kalau kamu suka artikel ini, jangan lupa bookmark blog ini dan share ke teman kamu ya! 🚀

Inspirasi Pedia