Desain Aman Form Login Menggunakan Jquery Accordion

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

Login Dengan Accordion

Lihat Demo

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.

Lihat Demo Download

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.

 

Muhammad K Huda

A non exhausted blogger person within fullstack engineer (spicy food), open source religion, self-taught driver and maybe you know or don't like it. Simply says, Hello from Me!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.