Membuat Login Dengan jquery, dan css
pertama buat terlebih dahulu buat HTML simpan dengan nama index.html
seperti dibawah ini :
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Login Dengan Jquery Accordion / Akordeon</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300" rel="stylesheet" type="text/css">
<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>
<script type="text/javascript">
$(document).ready(function () {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [2, 0, 1] });
});
</script>
</head>
<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>
</body>
</html>
setelah semua nya selesai maka akan tampil seperti gambar dibawah ini :
Login ini akan lebih aman saat pengguna memasukan username, setelah itu akan memasukan password maka username akan tertutup, dan tulisan password akan ke atas dan setelah itu masukan password dan submit
Lebih jelas nya lagi silahkan unduh (disni)
semoga bemanfaat
Post a Comment