Halo Authemers dan para pembaca yang sedang belajar membuat website! 👋
Salah satu komponen penting dalam sebuah aplikasi web adalah form login. Hampir semua website modern — mulai dari blog, dashboard admin, aplikasi SaaS, hingga e-commerce — membutuhkan sistem login untuk mengelola pengguna.
📋 Daftar Isi
- 1. Form Login HTML Sederhana
- 2. Form Login dengan Gradient Background
- 3. Form Login dengan Icon
- 4. Form Login dengan Remember Me
- 5. Form Login Sosial Media
- 6. Form Login Dark Mode
- 7. Form Login Glassmorphism
- 8. Form Login Floating Label
- 9. Form Login Animated Button
- 10. Form Login dengan Forgot Password
- Kesimpulan
- FAQ (Pertanyaan yang Sering Ditanyakan)
Bagi developer pemula, membuat form login HTML adalah langkah awal yang sangat bagus untuk memahami:
📚 Baca Juga
- Struktur HTML Form
- Styling menggunakan CSS
- Interaksi pengguna di halaman web
- Konsep autentikasi sebelum masuk ke backend seperti PHP, Node.js, atau Python
Pada artikel ini kita akan melihat 10 contoh form login HTML + CSS dengan berbagai gaya desain yang sering digunakan dalam website modern.
Artikel ini cocok untuk:
- Pemula yang baru belajar HTML dan CSS
- Developer yang ingin membuat UI login sederhana
- Pembaca yang mencari inspirasi desain login page
Mari kita mulai dari yang paling sederhana.
1. Form Login HTML Sederhana
Form login sederhana biasanya digunakan untuk:
- tutorial HTML
- halaman login admin sederhana
- prototype aplikasi web
Contoh kode:
<!DOCTYPE html>
<html>
<head>
<title>Login Sederhana</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:8px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#3498db;
color:white;
border:none;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
</body>
</html>hasilnya akan terlihat seperti:
2. Form Login dengan Gradient Background
Banyak website modern menggunakan background gradient agar halaman login terlihat lebih hidup. Silahkan copy kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Login Gradient</title>
<style>
body{
font-family:Arial;
background:linear-gradient(135deg,#6a11cb,#2575fc);
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:40px;
border-radius:10px;
width:300px;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#2575fc;
color:white;
border:none;
}
</style>
</head>
<body>
<div class="login">
<h2>Member Login</h2>
<form>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign In</button>
</form>
</div>
</body>
</html>hasilnya:
3. Form Login dengan Icon
Di dunia aplikasi modern, form login bukan hanya sekadar tempat memasukkan username dan password. Ia adalah gerbang pertama yang menyambut pengguna sebelum memasuki sistem. Karena itulah, desain form login perlu dibuat jelas, menarik, dan mudah dipahami. Salah satu cara sederhana namun sangat efektif untuk meningkatkan pengalaman pengguna adalah dengan menambahkan icon pada setiap input field.
Icon berfungsi sebagai petunjuk visual yang membantu pengguna memahami fungsi dari setiap kolom tanpa harus membaca terlalu lama. Misalnya, ikon user untuk kolom username atau email, dan ikon lock untuk kolom password. Dengan adanya simbol-simbol kecil ini, tampilan form menjadi lebih intuitif, modern, dan terasa profesional. Bahkan pada pandangan pertama, pengguna sudah dapat menebak fungsi dari setiap bagian form hanya dari ikon yang ditampilkan.
Selain meningkatkan estetika, penggunaan icon juga membantu menciptakan hierarki visual yang lebih rapi. Elemen-elemen pada form terlihat lebih terstruktur dan tidak terasa kosong. Hal ini sangat penting terutama dalam desain antarmuka modern yang mengutamakan kesederhanaan namun tetap informatif. Dengan kombinasi icon, placeholder, dan desain input yang bersih, form login dapat terlihat jauh lebih elegan dibandingkan form biasa yang hanya berisi teks.
Dalam praktik pengembangan web, icon pada form login biasanya diimplementasikan menggunakan library icon populer seperti Font Awesome, Bootstrap Icons, atau Material Icons. Library tersebut menyediakan berbagai ikon yang dapat digunakan secara gratis dan mudah diintegrasikan ke dalam proyek HTML maupun CSS.
Pada bagian ini, kita akan belajar bagaimana membuat form login yang lebih menarik dengan menambahkan icon pada setiap kolom input. Kita juga akan mengatur posisi icon agar terlihat menyatu dengan field input, sehingga desain form menjadi lebih modern dan nyaman digunakan. Dengan teknik sederhana ini, tampilan login pada website atau aplikasi yang Anda buat akan terasa lebih profesional dan siap digunakan oleh pengguna di dunia nyata.
Silakan copy kode berikut untuk melihat bagaimana struktur HTML dan CSS digunakan untuk menampilkan icon di dalam form login.
<!DOCTYPE html>
<html>
<head>
<title>Login Icon</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body{
font-family:Arial;
background:#ecf0f1;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:8px;
}
.input-group{
position:relative;
margin-bottom:15px;
}
.input-group i{
position:absolute;
top:12px;
left:10px;
}
.input-group input{
width:100%;
padding:10px 10px 10px 35px;
}
button{
width:100%;
padding:10px;
background:#27ae60;
border:none;
color:white;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<div class="input-group">
<i class="fa fa-user"></i>
<input type="text" placeholder="Username">
</div>
<div class="input-group">
<i class="fa fa-lock"></i>
<input type="password" placeholder="Password">
</div>
<button>Login</button>
</form>
</div>
</body>
</html>Dan hasilnya akan terlihat seperti ini:
4. Form Login dengan Remember Me
Form login merupakan gerbang utama sebelum pengguna dapat mengakses sebuah sistem atau aplikasi. Agar lebih nyaman digunakan, form login biasanya dilengkapi dengan beberapa fitur tambahan. Salah satu fitur yang cukup umum digunakan adalah opsi Remember Me.
Fitur Remember Me memungkinkan sistem mengingat data login pengguna pada perangkat yang sama. Dengan mencentang opsi ini, pengguna tidak perlu lagi memasukkan username atau email setiap kali membuka website. Hal ini membuat proses login menjadi lebih cepat dan praktis, terutama bagi pengguna yang sering mengakses sistem tersebut.
Silahkan copy kode berikut untuk membuat form login dengan fitur Remember Me pada halaman website Anda.
<!DOCTYPE html>
<html>
<head>
<title>Login Remember</title>
<style>
body{
font-family:Arial;
background:#f4f6f9;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:320px;
border-radius:8px;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#3498db;
border:none;
color:white;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<label>
<input type="checkbox"> Remember Me
</label>
<button>Login</button>
</form>
</div>
</body>
</html>Setelah kode dijalankan, Anda dapat melihat hasil tampilannya melalui preview di browser. Contoh gambar tampilan form login juga dapat dijadikan referensi agar Anda memahami bagaimana posisi checkbox Remember Me ditampilkan pada halaman login.
5. Form Login Sosial Media
Selain menggunakan username dan password, banyak website modern juga menyediakan opsi login menggunakan akun media sosial. Fitur ini memungkinkan pengguna masuk ke dalam sistem dengan lebih cepat tanpa perlu membuat akun baru terlebih dahulu.
Login social media biasanya terhubung dengan platform populer seperti Google, Facebook, atau Twitter. Dengan menekan tombol login tersebut, pengguna dapat langsung masuk menggunakan akun yang sudah mereka miliki. Cara ini membuat proses registrasi dan login menjadi lebih praktis.
Silahkan copy kode berikut untuk membuat form login dengan tombol login social media.
<!DOCTYPE html>
<html>
<head>
<title>Social Login</title>
<style>
body{
font-family:Arial;
background:#ecf0f1;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:320px;
border-radius:10px;
text-align:center;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
border:none;
color:white;
margin-top:5px;
}
.login-btn{
background:#3498db;
}
.google{
background:#db4437;
}
.facebook{
background:#4267B2;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button class="login-btn">Login</button>
<button class="google">Login with Google</button>
<button class="facebook">Login with Facebook</button>
</form>
</div>
</body>
</html>Hasilnya akan terlihat keren seperti gambar berikut:
6. Form Login Dark Mode
Selain desain standar, banyak website modern kini juga menyediakan tampilan Dark Mode. Mode ini menggunakan warna latar yang lebih gelap sehingga tampilan terlihat lebih elegan dan nyaman di mata, terutama saat digunakan pada malam hari atau di ruangan dengan pencahayaan rendah.
Form login dengan Dark Mode biasanya menggunakan kombinasi warna seperti hitam, abu-abu gelap, atau biru tua, dipadukan dengan teks berwarna terang agar tetap mudah dibaca. Desain seperti ini tidak hanya terlihat modern, tetapi juga memberikan pengalaman visual yang lebih nyaman bagi pengguna.
Contoh kode:
<!DOCTYPE html>
<html>
<head>
<title>Dark Login</title>
<style>
body{
background:#121212;
font-family:Arial;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
color:white;
}
.login{
background:#1e1e1e;
padding:30px;
border-radius:8px;
width:300px;
}
input{
width:100%;
padding:10px;
margin:10px 0;
background:#333;
border:none;
color:white;
}
button{
width:100%;
padding:10px;
background:#00b894;
border:none;
color:white;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
</body>
</html>Hasilnya keren banget bro.
7. Form Login Glassmorphism
Dalam desain antarmuka modern, salah satu gaya yang cukup populer adalah Glassmorphism. Desain ini memberikan efek tampilan seperti kaca transparan dengan latar belakang yang sedikit blur. Hasilnya, elemen pada halaman terlihat lebih elegan, ringan, dan futuristik.
Form login dengan gaya Glassmorphism biasanya memiliki latar semi-transparan, efek blur, serta bayangan halus di sekeliling elemen form. Kombinasi ini membuat tampilan login terasa lebih modern dan menarik, terutama jika dipadukan dengan background gradasi warna atau gambar.
Contoh kode:
<!DOCTYPE html>
<html>
<head>
<title>Glass Login</title>
<style>
body{
background:url('https://picsum.photos/1600/900') no-repeat center;
background-size:cover;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
font-family:Arial;
}
.login{
background:rgba(255,255,255,0.2);
padding:40px;
border-radius:10px;
backdrop-filter:blur(10px);
width:300px;
color:white;
}
input{
width:100%;
padding:10px;
margin:10px 0;
border:none;
}
button{
width:100%;
padding:10px;
background:#00c6ff;
border:none;
color:white;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
</body>
</html>Hasilnya:
8. Form Login Floating Label
Salah satu desain form yang cukup populer dalam UI modern adalah Floating Label. Pada desain ini, label tidak berada di luar input seperti biasanya, tetapi berada di dalam kolom input dan akan bergerak ke atas ketika pengguna mulai mengetik. Efek ini membuat tampilan form terlihat lebih rapi dan minimalis.
Selain memberikan kesan modern, Floating Label juga membantu menjaga tampilan form tetap bersih karena label dan placeholder digabung dalam satu elemen. Ketika pengguna mengisi input, label akan berpindah posisi sehingga tetap terlihat dan tidak mengganggu teks yang sedang diketik.
Silahkan copy kode berikut untuk membuat form login dengan efek Floating Label.
<!DOCTYPE html>
<html>
<head>
<title>Floating Label Login</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:10px;
}
.field{
position:relative;
margin:20px 0;
}
.field input{
width:100%;
padding:10px;
}
.field label{
position:absolute;
top:-10px;
left:10px;
background:white;
padding:0 5px;
font-size:12px;
}
button{
width:100%;
padding:10px;
background:#3498db;
color:white;
border:none;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<div class="field">
<input type="text">
<label>Username</label>
</div>
<div class="field">
<input type="password">
<label>Password</label>
</div>
<button>Login</button>
</form>
</div>
</body>
</html>9. Form Login Animated Button
Agar tampilan form login tidak terlihat kaku, kita bisa menambahkan animasi pada tombol login. Tombol dengan efek animasi dapat memberikan kesan interaktif dan membuat halaman login terasa lebih hidup saat digunakan oleh pengguna.
Biasanya animasi ini muncul ketika tombol disentuh atau saat kursor diarahkan ke tombol (hover effect). Efek yang digunakan bisa berupa perubahan warna, bayangan, pergerakan ringan, atau efek cahaya. Meskipun sederhana, animasi seperti ini dapat membuat desain form login terlihat lebih modern dan menarik.
Silahkan copy kode berikut untuk membuat form login dengan animated button pada halaman website Anda.
<!DOCTYPE html>
<html>
<head>
<title>Animated Login</title>
<style>
body{
font-family:Arial;
background:#ecf0f1;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:10px;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#3498db;
color:white;
border:none;
transition:0.3s;
}
button:hover{
transform:scale(1.05);
background:#2c3e50;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button>Login</button>
</form>
</div>
</body>
</html>Setelah kode dijalankan, Anda dapat melihat hasil tampilannya melalui preview di browser atau pada contoh gambar tampilan yang tersedia di bawah ini. Dengan tambahan animasi ini, form login akan terlihat lebih dinamis dan profesional.
10. Form Login dengan Forgot Password
Dalam sebuah sistem login, tidak jarang pengguna lupa dengan password yang mereka miliki. Karena itu, banyak website modern menambahkan fitur Forgot Password sebagai solusi agar pengguna dapat memulihkan akses ke akun mereka.
Biasanya fitur ini ditampilkan dalam bentuk link kecil di bawah kolom password atau di dekat tombol login. Ketika diklik, pengguna akan diarahkan ke halaman pemulihan password untuk memasukkan email atau username yang terdaftar.
Silahkan copy kode berikut untuk membuat form login dengan fitur Forgot Password.
<!DOCTYPE html>
<html>
<head>
<title>Login Forgot Password</title>
<style>
body{
font-family:Arial;
background:#f4f4f4;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.login{
background:white;
padding:30px;
width:300px;
border-radius:10px;
text-align:center;
}
input{
width:100%;
padding:10px;
margin:10px 0;
}
button{
width:100%;
padding:10px;
background:#3498db;
color:white;
border:none;
}
a{
font-size:14px;
color:#3498db;
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<form>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Login</button>
<p>
<a href="#">Forgot Password?</a>
</p>
</form>
</div>
</body>
</html>Hasilnya:
Kesimpulan
Form login adalah komponen dasar yang hampir selalu ada di setiap aplikasi web. Dengan memahami berbagai variasi desain login seperti yang kita bahas di atas, Anda bisa:
- membuat halaman login yang lebih menarik
- meningkatkan pengalaman pengguna
- mempersiapkan integrasi dengan backend seperti PHP, Node.js, atau Python
Bagi pemula, sangat disarankan untuk mulai dari form login sederhana, kemudian perlahan mencoba desain yang lebih kompleks seperti glassmorphism atau split screen.
Semakin sering Anda berlatih membuat UI, semakin mudah pula Anda memahami konsep frontend development modern.
FAQ (Pertanyaan yang Sering Ditanyakan)
Apa itu form login HTML?
Form login HTML adalah formulir pada halaman web yang digunakan pengguna untuk memasukkan username dan password sebelum mengakses sistem.
Apakah form login HTML sudah cukup untuk autentikasi?
Tidak. HTML hanya membuat tampilan form. Proses autentikasi harus dilakukan menggunakan backend seperti PHP, Node.js, atau Python.
Apakah form login harus menggunakan CSS?
Tidak wajib, tetapi CSS membuat tampilan form login menjadi lebih menarik dan profesional.
Bagaimana cara membuat login benar-benar berfungsi?
Anda perlu menghubungkan form login dengan sistem backend dan database seperti MySQL.