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.

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.

Contents
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

	<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“></script>
	<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” />
	<link href=”css/jquery.akordeon.css” rel=”stylesheet” type=”text/css” />
	<link href=”css/demo.css” rel=”stylesheet” type=”text/css” />
	<script src=”js/bootstrap.min.js” type=”text/javascript“></script>
	<script src=”js/jquery.akordeon.js” type=”text/javascript“></script>

view raw

gistfile1.html

hosted with

by GitHub

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

	<form>
	<fieldset>
	<div id=”demo-wrapper“>
	<div class=”akordeon” id=”buttons“>
	<div class=”akordeon-item expanded“>
	<div class=”akordeon-item-head“>
	<div class=”akordeon-item-head-container“>
	<div class=”akordeon-heading“>
	Username
	</div>
	</div>
	</div>
	<div class=”akordeon-item-body“>
	<div class=”akordeon-item-content“>
	<input type=”text” class=”input-large” placeholder=”Ketik Username Anda“>
	</div>
	</div>
	</div>
	<div class=”akordeon-item“>
	<div class=”akordeon-item-head“>
	<div class=”akordeon-item-head-container“>
	<div class=”akordeon-heading“>
	Password
	</div>
	</div>
	</div>
	<div class=”akordeon-item-body“>
	<div class=”akordeon-item-content“>
	<input type=”password” class=”input-large” placeholder=”Password“>
	</div>
	</div>
	</div>
	</div>
	<button class=”btn btn-large btn-block” id=”submit” type=”button“>Submit</button>
	</div>
	</fieldset>
	</form>

view raw

gistfile1.html

hosted with

by GitHub

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.