Contoh Coding Form Login HTML, CSS, dan Bootstrap 5

Menghubungkan Form dengan Backend Secara Aman

Form belum dapat digunakan untuk login sungguhan sebelum dihubungkan dengan PHP, CodeIgniter, Laravel, Node.js, atau backend lainnya. Saat dikembangkan menjadi sistem produksi, terapkan setidaknya:

• HTTPS untuk melindungi data ketika dikirim melalui jaringan.
• Validasi dan normalisasi input di server.
• Hash kata sandi menggunakan fungsi yang sesuai seperti password_hash() dan password_verify() pada PHP—jangan menyimpan kata sandi asli.
• Session cookie dengan pengaturan HttpOnly, Secure, dan SameSite yang sesuai.
• Perlindungan CSRF pada permintaan login berbasis session.
• Rate limiting atau pembatasan percobaan login.
• Pesan kegagalan yang tidak membocorkan apakah sebuah email terdaftar.
• Regenerasi session ID setelah autentikasi berhasil.
• Logging dan pemantauan percobaan login mencurigakan tanpa mencatat kata sandi.

Hindari menyimpan kata sandi di localStorage. Pilihan “ingat saya” juga harus dibuat menggunakan token acak yang aman, memiliki masa berlaku, dapat dicabut, dan disimpan secara tepat di sisi server—bukan dengan menyimpan kata sandi pengguna.

Catatan Akhir

Sekarang Anda sudah mempunyai contoh form login responsif menggunakan HTML, CSS, Bootstrap 5, dan JavaScript. Contoh ini cocok untuk latihan frontend atau dijadikan dasar tampilan login sebelum diintegrasikan dengan backend.

Source code lengkap tersedia dalam file unduhan. Pengembangan berikutnya dapat dilanjutkan menjadi form login PHP dan MySQL atau sistem login CodeIgniter 4 yang menangani autentikasi, session, database, serta keamanan di sisi server.

Referensi

• [Dokumentasi Getting Started Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
• [Dokumentasi Grid Bootstrap](https://getbootstrap.com/docs/5.3/layout/grid/)
• [Bootstrap Icons](https://icons.getbootstrap.com/)
• [OWASP Authentication Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Authentication_Cheat_Sheet.html)
• [OWASP Session Management Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Session_Management_Cheat_Sheet.html)