Terkadang kejadian ini pasti pernah dialami pembaca sekalian. Ketika kita sedang login mengetikkan username atau password, tak disangka password yang kita ketikkan tanpa sengaja malah mengarah di bagian input username. Hal ini menyebabkan password yang kita masukkan terlihat di bagian username dan tentunya berbahaya jika ada orang di samping kita. Itulah salah satu kelemahan dari desain form login pada umumnya.
Login Dengan Accordion
Dari situlah saya mencoba berinisiatif untuk merancang sebuah desain yang ketika kita mengetikkan username maka input password tidak aktif, pun ketika kita mengetik password sebaliknya alias input username tertutup dan tidak aktif. Oleh karena itu, saya mencoba beberapa eksperimen sederhana dan menemukan ide form login dengan kombinasi akordion / jquery Accordion. Anda bisa melihat secara langsung demonya terlebih dahulu.
Sebelumnya saya berterima kasih kepada egrappler.com yang telah memberikan artikel tutorial tentang Accordion ini. Berikut adalah beberapa library yang Anda perlukan untuk merancang desain form login yang aman menggunakan Jquery Accordion.
-
Library Jquery dari Google API
-
Library Javascript menggunakan jquery.akordeon.js
-
Beserta paket css dari jquery.akordeon.css yang telah saya modifikasi
-
Paket Bootstrap js dan css
Pertama di bagian head kita perlu mengembed semua library javascript dan css yang telah kita download
Kemudian kita membuat body utama untuk form login yang terdiri dari input username dan password, disini saya masih menggunakan tag div default demo dari Jquery Akordeon. Silahkan ketik kode ini di dalam tag Body
Selanjutnya kita perlu menambah script yang fungsinya akan membaca tag class akordeon agar berjalan sebagaimana mestinya. Masukkan script di bawah pada bagian Head struktur html Anda.
Conclusion
Beberapa hal baru yang bisa kita dapat dari pembuatan form login menggunakan jquery accordion adalah :
-
input username dan password akan lebih mempunyai privilege.
-
jika suatu saat terjadi salah input, maka salah satu form tetap akan tertutup dan tidak terlihat
-
kita harus menggunakan klik mouse untuk membuka input password maupun username
-
developer dapat melakukan kustomisasi sendiri menggunakan model accordion yang lain.
Semoga bermanfaat.