Penulis: Satria Anggito, Bagas alamsyah putra, Khairuz zuhdi, Bagus gusti janova, fadel achmad prasetya
portalbersama.com – Tangerang Selatan, 15 Oktober 2024 – Halo semuanya, pada artikel ini, kita akan membahas cara membuat form login yang aestetik dan simpel menggunakan HTML dan CSS. Form login merupakan salah satu elemen penting pada setiap website, dan selain fungsi nya, tampilan yang menarik juga dapat meningkatkan pengalaman pengguna (User Experience). Dengan menggunakan HTML untuk struktur dasar dan CSS untuk desain, kita akan membuat form login yang tidak hanya mudah digunakan, tetapi juga menarik secara visual. Yuk, Simak langkah langkahnya!
- Membuat file html dan css dan siapkan foto atau gambar sebagai background untuk form login kalian.
- Membuat struktur html dengan title login, bisa menggunakan “!” lalu enter untuk langsung membuat struktur dari html.
- Cari web untuk icon pada form login kalian, disini kita menggunakan boxicons untuk icon untuk form login kita. Lalu pergi kebagian usage pada bagian kanan atas.
- Lalu, scroll kebawah hingga menemukan usage as a font dan salin link dari boxicons supaya kita bisa menggunakan icon untuk form login kita.
- Selanjutnya menghubung kan file html dan css dengan link seperti baris ke 7 dan menempelkan link icon untuk dekorasi form login pada boxicons.com dan tempatkan di barisan 8 seperti gambar di atas.
- Buatlah Body html dan class dengan label Login dan membuat inputbox untuk username dengan type text.
- Selanjutnya membuat input box untuk password, dengan type password sehingga saat mengetik pada inputbox password akan tampil bintang(****).
- Selanjutnya membuat button untuk login dengan type submit dan dengan class btn.
- Selanjutnya pada bagian ini kita membuat check box untuk remember me untuk mengingat username dan password, lalu membuat forgot password, agar dapat membantu user saat lupa passwordnya.
- Lalu, pergi ke googlefont.com untuk mencari font yang akan digunakan pada form login kalian. Setelah menemukan font yang ingin digunakan salin link pada web google font di bagian web lalu pilih bagian @import dan salin pada bagian dalam style yang di mulai dari @import.
- Selanjut nya pada css langkah pertama kita tempelkan yang sudah kita salin pada google fonts poppins atau https://fonts.google.com/specimen/Poppins tadi.
- Selanjutnya untuk membuat desain form login kita sesuaikan margin dan padding nya. Selanjutnya pada bagian body masukan path foto background pada bagian background sesuai dengan nama gambar yang ingin digunakan. Pada bagian menaruh nama gambar jangan sampai berbeda dengan nama file gambar yang ingin digunakan.
- Selanjutnya, pada bagian login bagian header kita sesuaikan posisi text pada bagian tengah inputbox menggunakan text-align dengan posisi center. Lalu pada bagian inputbox kita dan inputbox input kita sesuaikan lebar dan tinggi untuk input box, kalian bisa menggunakan seperti di gambar sebagai contoh. Pada bagian background input box kita pakai transparan supaya terlihat menarik.
- Pada bagian ini untuk inputbox remember forgot.
- Pada bagian ini untuk mendesign button login. Pada bagian ini kita atus posisi button dan pada bagian ini juga kita mengatur lebar dan panjang button login.
- Pada bagian ini untuk design register link. Pada bagian ini kita atur dekorasi text nya untuk telihat garis bawah ketika pointer mouse terdapat pada tulisan register link, di sini kita menggunakan text-decoration: underline;
- Dan ini adalah hasil akhir dari form login yang sudah kita buat.
Itulah langkah-langkah untuk membuat form login yang simpel namun terlihat estetik menggunakan HTML dan CSS. Degan memadukan kode yang sederhana dan desain yang menarik, sehingga kamu dapat menciptakan pengalaman untuk pengguna yang nyaman dan tampilan yang menarik. Jadi jangan ragu untuk mengembangkan desain ini lebih lanjut sesuai dengan kebutuhan dan style websitemu. Semoga tutorial ini dapat bermanfaat, dan selamat mencoba! Terima Kasih.
