Pada kesempatan ini kita akan membuat form login dengan mengunakanBOOTSTRAP. Bootstrap yang merupak an CSS Framework mempunyai banyak sumber daya untuk mendesign sebuah form login yang tampilan yang lebih menarik dan profesional. Dalam melakukan design sebuah form login kita tinggal menempatkan class yang telah di sediakan oleh bootstrap seperti <div class=”page-header”> </div>.
Sebleum mendesign sebuah form login kita harus meyediakan dahulu paket BOOTSTRAP yang berisikan bootstrap.css dan jquery.js , silahkan download BOOTSTRAP pada www.getbootstrap.com. Untuk saat ini kita akan membuat sebuah form login dengan tampilan sebagai berikut :
info news20
Langkah selanjutnya, kita tempatkan paket dari BOOTSTRAP tersebut di script HTML yaitu diantara <head></head>, untuk contoh lihat dibawah ini :
<head>
<title>Klikwebku</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.css”>
<script src=”js/jquery.js”></script>
</head>
Selanjutnya kita membuat class form yang telah disediakan oleh BOOTSTRAP, ketik script di bawah ini untuk script lengkapnya :
<html>
<head>
<title>Klikwebku</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/bootstrap.css”>
<script src=”js/jquery.js”></script>
</head>
<body style=”background-image:url(‘bg.jpg’);”>
<div class=”page-header”> </div>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″> </div>
<div class=”col-sm-4 bg bg-primary”>
<h1 class=”page-header”>Login</h1>
<form role=”form” method=”POST” action=”ceklogin.php”>
<div class=”form-group”>
<label for=”username”>Username</label>
<input type=”text” class=”form-control” id=”username” placeholder=”Username”>
</div>
<div class=”form-group”>
<label for=”password”>Password:</label>
<input type=”password” class=”form-control” id=”password” placeholder=”Password”>
</div>
<div class=”checkbox”>
<label><input type=”checkbox”>Ingat saya</label>
</div>
<button type=”submit” class=”btn btn-primary”>Login</button>
<button type=”submit” class=”btn btn-warning”>Register</button>
</form>
</div>
<div class=”col-sm-4″>
</div>
</div>
</div>
</body>
</html>
0 komentar:
Posting Komentar