Cara Membuat Form Login untuk Website Menggunakan HTML dan CSS
Setiap website yang memiliki fitur login sebaiknya menyediakan form login yang tidak hanya fungsional, tapi juga menarik. Sebab, selain untuk autentikasi, tampilan halaman login website juga bisa membantu membangun branding.
Desain yang konsisten dengan logo dan warna brand bisa menunjukkan profesionalisme bisnis dan meningkatkan kepercayaan pengguna. Proses login yang lancar juga membantu membangun reputasi, terutama bagi bisnis online atau layanan berbasis akun.
Di artikel ini, kami akan menjelaskan cara membuat form login menggunakan HTML dan CSS, mulai dari persiapan awal hingga menguploadnya ke hosting. Yuk, langsung saja pelajari langkah-langkahnya!
Persiapan Awal
Sebelum mulai membuat form login, ada beberapa langkah persiapan yang perlu Anda lakukan agar prosesnya berhasil. Berikut hal-hal yang harus dipersiapkan:
- Tool text editor. Siapkan atau instal aplikasi HTML editor favorit Anda. Misalnya, Anda bisa menggunakan Notepad++, Visual Studio Code, TextEdit (menggunakan format plain text), atau Sublime Text.
- Buat folder proyek. Buat folder khusus di komputer Anda, misalnya dengan nama form-login. Folder ini akan digunakan untuk menyimpan file HTML dan CSS Anda agar lebih mudah diakses. Pastikan file CSS dan HTML disimpan di folder yang sama agar bisa saling terhubung.
- Aplikasi web browser. Anda memerlukan web browser seperti Chrome atau Firefox untuk meninjau hasil form yang dibuat.
Nah, kalau sudah siap, lanjutkan ke bagian berikutnya yuk!
Cara Membuat Form Login Menggunakan HTML dan CSS
Di bagian ini, kami akan menjelaskan langkah-langkah membuat form login menggunakan HTML dan CSS.
Untuk memulai, Anda perlu membuat dua file menggunakan aplikasi text editor dulu, lalu menyimpannya dengan ekstensi .html dan .css. File HTML berfungsi untuk menyimpan struktur halaman login Anda, sedangkan file CSS akan menentukan gaya dan tampilannya.
1. Buat Struktur HTML Form Login
Pertama, Anda perlu menentukan struktur HTML halaman login Anda. Untuk membuatnya, buka file dengan ekstensi .html yang tadi sudah disiapkan, lalu tambahkan kode berikut ini:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Form</title> <link rel="stylesheet" href="styles.css"> </head>
Berikut penjelasan potongan kode di atas:
- <!DOCTYPE html> – Mendeklarasikan dokumen sebagai HTML5 agar browser merender halaman sesuai standar terbaru.
- <html lang=”id”> – Menetapkan bahasa Indonesia sebagai bahasa dokumen untuk SEO dan aksesibilitas website.
- <head> </head> – Memuat metadata dan link eksternal untuk mengatur halaman.
- <meta charset=”UTF-8″> – Mengatur encoding karakter agar teks ditampilkan dengan benar.
- <meta name=”viewport”> – Menyesuaikan tampilan halaman website agar tetap optimal di perangkat mobile.
- <title>Login Form</title> – Menentukan judul yang ditampilkan di tab browser.
- <link rel=”stylesheet” href=”styles.css”> – Menghubungkan file CSS eksternal yang tadi juga sudah disiapkan untuk styling halaman.
Setelah membuat struktur awal file HTML, sekarang saatnya menambahkan fitur-fitur yang perlu disertakan di halaman login.
Selain fitur dasar seperti kolom nama pengguna, kata sandi, dan tombol login, di tutorial ini kami akan menambahkan fitur centang untuk mengingat akun, fitur lupa kata sandi, dan fitur daftar kalau belum punya akun.
Tapi sebelumnya, buat dulu bagian judul halaman login Anda dengan menambahkan kode berikut:
<body>
<div class="login-container">
<h2>Silakan login terlebih dahulu</h2>
<form action="#" method="POST">
Ganti simbol “#” dalam kode di atas dengan URL halaman login yang sebenarnya, lalu Anda bisa lanjut menambahkan fitur-fitur di bawah ini.
Kolom Nama Pengguna dan Kata Sandi
Kolom ini merupakan elemen utama yang berfungsi untuk merekam kredensial pengguna. Nama pengguna (username) bertindak sebagai identitas unik yang memverifikasi pengguna, sedangkan kata sandi (password) memastikan hanya pemilik akun yang bisa login.
Atribut required memastikan kolom tidak boleh kosong untuk menghindari kesalahan input.
Ini contoh kode HTML yang bisa Anda gunakan:
<label for="username">Nama pengguna:</label> <input type="text" id="username" name="username" placeholder="Masukkan nama pengguna" required> <label for="password">Kata sandi:</label> <input type="password" id="password" name="password" placeholder="Masukkan kata sandi" required>
Tampilan awal kolom nama pengguna dan kata sandi ini akan terlihat seperti berikut:
Kotak Centang Ingat Saya
Menggunakan opsi ini, pengguna bisa menyimpan sesi loginnya sehingga tidak perlu login berulang kali saat mengunjungi website lagi. Meskipun memerlukan pemrosesan backend untuk mengatur cookie, Anda bisa menambahkannya menggunakan HTML.
Kode yang perlu ditambahkan ke file index.html Anda adalah sebagai berikut:
<label> <input type="checkbox" name="remember"> Ingat saya </label>
Berikut tampilan form login kami setelah fitur ini ditambahkan:
Tombol Login
Tombol login berfungsi untuk memproses input pengguna dan mengirimnya ke server. Tanpa tombol ini, pengguna tidak bisa mengirimkan data untuk autentikasi.
Untuk fitur ini, tambahkan type="submit" agar form terkirim secara otomatis saat tombol ditekan.
Masukkan kode berikut ini untuk menambahkan tombol login:
<button type="submit">Login</button>
Sampai di sini, semua fitur dasar untuk halaman login sudah berhasil ditambahkan. Begini tampilannya:
Lupa Kata Sandi
Nah, kalau sudah menyertakan semua fitur dasar, sekarang saatnya menambahkan fitur pelengkap, yaitu link lupa kata sandi.
Link ini membantu pengguna mengatur ulang kata sandinya kalau terlupa. Biasanya, link ini mengarah ke halaman pemulihan kata sandi dengan URL tertentu. Jadi, Anda nanti perlu menambahkan URL halaman tersebut dalam kode Anda.
Ini kode HTML yang perlu Anda tambahkan. Jangan lupa ganti # dengan URL halaman lupa kata sandi yang sebenarnya di website Anda.
<p><a href="#">Lupa kata sandi Anda?</a></p>
Link ini akan ditampilkan di bawah tombol login seperti berikut:
Daftar untuk Pengguna Baru
Terakhir, kami akan menambahkan fitur pendaftaran akun bagi pengguna baru. Kami akan meletakkannya di bawah tombol login agar alur perjalanan pengguna tetap terarah.
Sama seperti sebelumnya, ganti # dengan URL yang mengarah ke halaman pendaftaran di website Anda. Berikut kodenya:
<p>Belum punya akun? <a href="#">Daftar sekarang</a>.</p>
Setelah selesai memodifikasi setiap bagian kode di atas sesuai kebutuhan, sekarang Anda sudah punya struktur HTML lengkap yang diperlukan untuk membuat form login.
Dari contoh kami, berikut kode lengkapnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>Silakan login terlebih dahulu</h2>
<form action="#" method="POST">
<label for="username">Nama pengguna:</label>
<input type="text" id="username" name="username" placeholder="Masukkan nama pengguna" required>
<label for="password">Kata sandi:</label>
<input type="password" id="password" name="password" placeholder="Masukkan kata sandi" required>
<label>
<input type="checkbox" name="remember"> Ingat saya
</label>
<button type="submit">Login</button>
<p><a href="#">Lupa kata sandi Anda?</a></p>
<p>Belum punya akun? <a href="#">Daftar sekarang</a>.</p>
</form>
</div>
</body>
</html>
Pastikan setiap tag sudah ditutup dengan benar. Dalam contoh di atas, tag penutupnya adalah”
</form> </div> </body> </html>
Kemudian karena belum diberi gaya, halaman login ini masih akan terlihat sederhana seperti berikut:
Selanjutnya, kami akan memandu Anda menyusun file styles.css yang akan menentukan gaya dan tampilan form login HTML Anda.
2. Tambahkan Gaya dengan CSS
Setelah selesai membuat struktur HTML form login, sekarang saatnya memodifikasi file styles.css untuk menambahkan gaya dengan file CSS agar tampilannya lebih menarik. Anda bisa mengatur elemen seperti tata letak, warna, dan tingkat respons form agar terlihat lebih profesional.
Di bagian ini, kami akan menunjukkan cara mengatur padding, margin, background, styling tombol, dan input, serta menyesuaikan tampilan login website dengan media queries untuk perangkat seluler.
Menambahkan padding, margin, dan background
Padding dan margin berfungsi untuk memberikan ruang di sekitar elemen agar tampilannya lebih rapi. Sementara itu, background menambahkan warna atau gambar latar belakang pada container form agar lebih mencerminkan brand Anda.
Untuk menambahkan gaya tersebut, sematkan kode berikut ke file styles.css Anda:
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px 40px;
background-color: #FFF8DC;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
Ini penjelasan kode di atas kalau Anda ingin mengeditnya lagi sesuai kebutuhan:
- width – berfungsi untuk mengatur lebar form.
- margin – menempatkan form di tengah halaman dengan jarak vertikal 100 piksel.
- padding – memberikan ruang dalam container.
- background-color – menentukan warna latar belakang. Pada contoh ini, kami menggunakan kode warna HTML untuk warna Cornsilk.
- border-radius – mengatur sudut form dengan gaya membulat.
- box-shadow – menambahkan efek bayangan halus di sekitar form.
Setelah itu, mari lanjutkan ke bagian berikutnya untuk menambahkan gaya pada kolom input dan tombol.
Mengatur warna dan hover effect pada input dan tombol
Agar kolom input dan tombol login terlihat lebih menarik, Anda bisa mengatur warnanya serta menambahkan efek hover saat mouse diarahkan pada kolom dan tombol tersebut.
Masukkan kode berikut dalam file CSS Anda untuk menambahkan gaya yang dimaksud:
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-right: 5px;
margin-bottom: 15px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
p {
text-align: center;
}
a {
color: #007bff;
}
a:hover {
text-decoration: underline;
}
Berikut penjelasan setiap bagian kode di atas:
- input[type=”text”], input[type=”password”], dan input[type=”checkbox”] berfungsi untuk mengatur ukuran dan jarak elemen bagi kolom input.
- button[type=”submit”] menetapkan warna biru pada tombol login.
- :hover menambahkan efek hover, mengubah warna tombol saat mouse diarahkan padanya.
- text-align: mengatur perataan teks ke tengah untuk fitur lupa kata sandi dan daftar akun.
- text-decoration: menetapkan gaya garis bawah agar teks lupa kata sandi dan daftar akun terlihat sebagai link.
Apabila sudah selesai memodifikasi tampilan elemen-elemen form Anda, mari lanjutkan untuk mengatur tingkat responsnya.
Responsivitas menggunakan media queries
Agar tampilan halaman login tetap optimal saat diakses di layar yang lebih kecil seperti perangkat seluler atau tablet, Anda bisa menambahkan media queries untuk menyesuaikan ukuran dan tata letak.
Berikut cuplikan kodenya:
@media (max-width: 600px) {
.login-container {
width: 90%;
margin: 50px auto;
}
input[type="text"], input[type="password"], button[type="submit"] {
font-size: 16px;
}
}
Penjelasannya adalah sebagai berikut:
- @media (max-width: 600px) – memastikan gaya hanya diterapkan di layar dengan lebar maksimal 600 piksel (perangkat seluler).
- width: 90% – mengatur lebar container agar tetap rapi di layar berukuran kecil.
- font-size – memperbesar ukuran teks agar lebih mudah dibaca di layar kecil.
Secara keseluruhan, kode CSS di atas berfungsi untuk menambahkan gaya pada form login Anda agar terlihat rapi, modern, dan responsif.
Berikut adalah kode CSS lengkapnya:
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px 40px;
background-color: #FFF8DC;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-right: 5px;
margin-bottom: 15px;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
p {
text-align: center;
}
a {
color: #007bff;
}
a:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.login-container {
width: 90%;
margin: 50px auto;
}
input[type="text"], input[type="password"], button[type="submit"] {
font-size: 16px;
}
}
Simpan perubahan yang sudah Anda buat pada file styles.css. Sebagai contoh, berikut adalah hasil tampilan form login HTML kami yang sudah diberi gaya menggunakan file CSS:
Selesai! Anda pun berhasil membuat tampilan halaman login website menggunakan HTML dan CSS.
Namun, Anda masih perlu memastikan semuanya berfungsi dengan benar untuk memberikan pengalaman pengguna yang optimal.
3. Pastikan Integrasi dan Lakukan Pengujian
Meskipun tadi Anda sudah menambahkan integrasi CSS dalam file index.html, pastikan lagi file tersebut sudah direferensikan dengan benar dalam kode Anda.
Cek kembali penulisan nama file dan path pada tag HTML. Kesalahan seperti spasi tambahan atau huruf kapital yang tidak sesuai bisa menyebabkan file CSS tidak terhubung dengan benar. Akibatnya, form login Anda mungkin tidak ditampilkan sebagaimana mestinya.
Kemudian, lakukan pengujian menggunakan web browser. Akses file HTML yang disimpan di komputer Anda dengan mengklik dua kali file tersebut, atau buka langsung melalui browser dengan memilih File → Open File.
Kami merekomendasikan agar Anda menggunakan jendela samaran (Incognito) agar semua perubahan Anda ditampilkan secara aktual, terutama kalau Anda melakukan perubahan pada file.
Periksa apakah formulir login sudah ditampilkan sesuai dengan gaya CSS yang ditentukan. Lihat lagi warna latar belakang, jarak antarelemen, atau teks pada form Anda. Pastikan juga form bisa menerima input, dan tombol login berfungsi dengan baik.
Dengan melakukan pengecekan dan pengujian ulang, Anda pun bisa memastikan tidak ada masalah serius yang mengganggu pengalaman pengguna Anda saat form tersebut diupload ke hosting Anda.
Seperti inilah hasil form yang kami buat saat dibuka menggunakan browser Google Chrome:
4. Upload Form Login ke Website
Setelah memastikan form login bekerja dengan baik, Anda bisa menguploadnya ke hosting agar bisa diakses secara online. Dengan mengupload file HTML dan CSS ke server, form login ini bisa digunakan oleh semua pengguna melalui internet.
Di bagian ini, kami akan menjelaskan cara upload file website ke hosting menggunakan hPanel. Apabila menggunakan control panel lain, langkah-langkahnya juga tidak akan terlalu berbeda.
Berikut cara mengupload form login HTML Anda ke hosting:
- Login ke hPanel, lalu klik menu Website.
- Pilih Dashboard di samping website yang Anda maksud, lalu klik File Manager.
- Buka direktori utama website, biasanya bernama public_html.
- Anda bisa membuat folder baru, misalnya form-login.
- Buka folder tersebut, lalu pilih Upload → File pada menu bagian atas.
- Pilih file index.html dan styles.css dari komputer Anda, lalu tunggu sampai prosesnya selesai.
Setelah file berhasil diupload, buka web browser lalu ketik URL website Anda diikuti dengan nama folder file HTML tersebut. Sebagai contoh, form kami bisa diakses dengan mengetik namadomain.tld/form-login/index.html.
Apabila Anda memerlukan panduan terkait pengembangan website HTML, silakan baca tutorial kami lainnya tentang cara membuat website dengan HTML dan CSS.
Kesimpulan
Membuat form login dengan HTML dan CSS merupakan salah satu proses penting yang perlu Anda pelajari apabila ingin mengembangkan website dari nol. Form ini tidak hanya berfungsi untuk autentikasi, tetapi juga membantu mencerminkan branding bisnis melalui desain yang konsisten.
Untuk membuatnya, Anda perlu menyiapkan struktur HTML dulu lalu menambahkan gaya dengan CSS. Setelah itu, Anda bisa mengupload file form login tersebut ke hosting agar bisa diakses secara online.
Dengan mengikuti langkah-langkah di artikel ini, Anda pun bisa membuat form login yang fungsional, menarik, dan responsif. Apabila ingin mengeksplorasi fungsi lainnya, Anda bisa mempelajari validasi JavaScript untuk meningkatkan keamanan dan pengalaman pengguna.
Selamat mencoba dan semoga berhasil!
Faradilla, yang lebih akrab disapa Ninda, adalah Content Marketing Specialist di Hostinger. Ia suka mengikuti tren teknologi, digital marketing, dan belajar bahasa. Melalui tutorial Hostinger ini, Ninda ingin berbagi informasi dan membantu pembaca menyelesaikan masalah yang dialami. Kenali Ninda lebih dekat di LinkedIn.
