Cara Membuat Login Form Sederhana dengan HTML, CSS, dan JavaScript

Mei 03, 2025 Posting Komentar

Membuat form login adalah salah satu langkah awal dalam memahami bagaimana sistem autentikasi bekerja. Dalam tutorial ini, kita akan membangun form login sederhana menggunakan HTML, CSS, dan JavaScript — cocok untuk pemula yang ingin memahami dasar interaktivitas form.

1. Struktur HTML

Pertama, kita buat struktur dasar HTML untuk form login:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form id="loginForm">
      <input type="text" id="username" placeholder="Username" required>
      <input type="password" id="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
    <p id="message"></p>
  </div>
</body>
</html>

2. Styling dengan CSS

Tambahkan gaya agar tampilan lebih menarik:

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f5f5f5;
}

.login-container {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}

input {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
}

button {
  padding: 10px 20px;
  background: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
}

3. Interaktivitas dengan JavaScript

Sekarang, tambahkan validasi sederhana di sisi client:

/* script.js */
document.getElementById("loginForm").addEventListener("submit", function(e) {
  e.preventDefault();

  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  const message = document.getElementById("message");

  if (username === "admin" && password === "123456") {
    message.textContent = "Login berhasil!";
    message.style.color = "green";
  } else {
    message.textContent = "Username atau password salah!";
    message.style.color = "red";
  }
});

Hasil Akhir

Gambar 2: Tampilan form login sederhana dengan validasi client-side menggunakan JavaScript.

Kesimpulan

Dengan form login sederhana ini, kamu bisa belajar cara kerja dasar autentikasi client-side. Meskipun ini belum cukup aman untuk penggunaan nyata (karena tidak ada verifikasi server), ini adalah pondasi bagus untuk lanjut belajar ke backend seperti Flask, Node.js, atau Firebase.

Kalau kamu suka dengan tutorial seperti ini, jangan lupa bookmark blog ini dan share ke temanmu yang sedang belajar coding juga!

Dede Rizqi Saya Dede Rizqi, seorang pengembang web dan penulis yang berfokus pada dunia teknologi dan pengembangan perangkat lunak. Melalui blog ini, saya berbagi pengetahuan dan pengalaman seputar pemrograman, SEO, dan teknologi web terkini.

Dede Rizqi Dev Blog