Selamat datang di blangkon koding, kali ini saya akan membahas tentang bagaimana membuat form log in dengan bootstrap
1. langkah pertama download dimana di situs resminya di www.getbootstrap.com dan langkah kedua adalah download jquery, download di situs resminya di www.jquery.com
2. Buat folder dengan nama
registrasi, lalu buat lagi folder di registrasi dengan nama assets copy-paste
file yang telah kita download ke folder aasets.
3. Setelah itu kita buat
file registration.html masukkan kode berikut ke text editor kalian
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LOG IN BLANGKON KODING</title>
<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="row text-center ">
<div class="col-md-12">
<br /><br />
<h2>Register</h2>
<br />
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<strong> Log In </strong>
</div>
<div class="panel-body">
<form role="form">
<br/>
<div class="form-group input-group">
<span class="input-group-addon"><i class= >@</i></span>
<input type="email" class="form-control" placeholder="Enter Email" />
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input type="password" class="form-control" placeholder="Enter Password" />
</div>
<a href="index.html" class="btn btn-success ">Register Me</a>
<hr />
Already Registered ? <a href="login.html" >Login here</a>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LOG IN BLANGKON KODING</title>
<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div class="row text-center ">
<div class="col-md-12">
<br /><br />
<h2>Register</h2>
<br />
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<strong> Log In </strong>
</div>
<div class="panel-body">
<form role="form">
<br/>
<div class="form-group input-group">
<span class="input-group-addon"><i class= >@</i></span>
<input type="email" class="form-control" placeholder="Enter Email" />
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input type="password" class="form-control" placeholder="Enter Password" />
</div>
<a href="index.html" class="btn btn-success ">Register Me</a>
<hr />
Already Registered ? <a href="login.html" >Login here</a>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
<!-- JQUERY SCRIPTS -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- METISMENU SCRIPTS -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
</body>
</html>
4. Kemudian
buka dengan browser kita maka akan tampil sebagai berikut
Silahkan kalau belum jelas bisa tinggalkan komentar di kolom comment..😄
Share This :
comment 0 komentar
more_vert