Form Login dan Pendaftaran Dengan HTML 5 CSS3 dan JQUERY
Script Login dan pendaftaran dengan html5 / css3 dan jqueryyah kali ini saya hanya ngasih script aja dulu ya buat login / sign up pakai jquery.. kalau kamu belum tau apa itu jquery ini saya jelaskan dulu..
JQUERY :
sebuah library JavaScript. Dalam dunia
pemrograman, library adalah kumpulan dari berbagai fungsi 'siap pakai'
untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.
SOURCE : www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery/
oke itu saja langsung koding dulu.. simpan di login.php di halaman htdocs/folderbaru/ atau sesuai selera
<!DOCTYPE HTML>
<html>
<head>
<title>Latihan jquery </title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<!-- Created by : fauzan1892 -->
<style>
body{ background:#ddd; color:#fff; width:99%; font-family:sans serif;}
.row{ background:#24303C; margin:0 545px; margin-top:5pc; }
.sub-menu{ text-align:center; padding-top:1pc; padding-bottom:1pc;}
.btn-1{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#1AB188;color:#fff;}
.btn-2{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#FE5E54;color:#fff;}
.body{ text-align:center; }
center{font-size:20px;}
.form{border:1px solid #fff; height:2.5pc; font-size:16px; padding-left:5px; background:#24303C; color:#fff;width:84%;}
.pull-left{float:left; width:45%; padding-left:18.5px;}
.pull-right{float:right;width:45%; padding-right:18.5px;}
</style>
</head>
<body>
<div class="row">
<div class="sub-menu">
<a href="#" id="formlogin"><button class="btn-1">Sign In</button></a>
<a href="#" id="formdaftar"><button class="btn-2">Sign Up</button></a>
</div>
<div id="login">
<div class="container">
<div class="body">
<br>
<center>Sign In For Admin</center>
<br>
<form method="POST" action="">
<input type="text" class="form" placeholder="Username *" name="username" required="required">
<br><br>
<input type="password" class="form" placeholder="Password *" name="password" required="required">
<br><br>
<p><button class="btn-1" name="proses">LOG IN</button></p>
<br>
</form>
</div>
</div>
</div>
<div id="daftar">
<div class="container">
<div class="body">
<br>
<center>Sign Up For New Member</center>
<br><br>
<form method="POST" action="">
<div class="pull-left">
<input type="text" class="form" placeholder="First Name *" name="email" required="required">
</div>
<div class="pull-right">
<input type="text" class="form" placeholder="Last Name *" name="email" required="required">
</div>
<br><br><br>
<input type="text" class="form" placeholder="Email Address *" name="email" required="required">
<br><br>
<input type="text" class="form" placeholder="Username *" name="username" required="required">
<br><br>
<input type="password" class="form" placeholder="Set A Password *" name="password" required="required">
<br><br>
<input type="password" class="form" placeholder="Retype Password *" name="retype" required="required">
<br><br>
<p><button class="btn-2" name="proses">GET STARTED</button></p>
<br>
</form>
</div>
</div>
</div>
</div>
<script>
$('#daftar').hide();
$('#formdaftar').click(
function(){
$('#daftar').show();
$('#login').hide();
}
);
</script>
<script>
$('#login').hide();
$('#formlogin').click(
function(){
$('#login').show();
$('#daftar').hide();
}
);
</script>
</body>
</html>
hasil :
oke itu dulu sekian terima kasih
Boleh juga nih, ijin coba dulu di blog gado-gado milikku
ReplyDeleteoke bang :D
ReplyDelete