Untuk sebuah website yang memerlukan validasi user tentunya memerlukan interface login. User mengisi form login dengan informasi yang dibutuhkan. (For a website that require user validation obviously need login interface. User fill the login form with necessary information).
Informasi pada form login pada tiap-tiap website dapat berbeda, tergantung informasi apa yang diingin divalidasi oleh sebuah website (The information of login form on each website can be different, depending on what information is needed for validation).
Pada tutorial ini kita akan menggunakan framework css Bootstrap (On this tutorial, we use Bootstrap).
Output yang akan kita buat akan ditunjukkan oleh gambar dibawah ini (The target of output which we make will be showed by following figure).
Buat file index.html (Create file index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="tutorial-boostrap-merubaha-warna">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Tutorial Boostrap : Form Login </title>
<link rel="stylesheet" href="assets/css/bootstrap.css">
<script src="assets/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
<script src="assets/js/bootstrap.min.js"></script>
<style type="text/css">
.navbar-inverse {
background-color: #3b5998;
font-size:18px;
}
.navbar-inverse .navbar-nav > li.clr1 a{
color: #F55;
}
.navbar-inverse .navbar-nav > li.clr2 a{
color: #973CB6;
}
.navbar-inverse .navbar-nav > li.clr3 a{
color: #5EC64D;
}
.navbar-inverse .navbar-nav > li.clr4 a{
color: #29AAE2;
}
.navbar-inverse .navbar-nav > li.clr1 a:hover, .navbar-inverse .navbar-nav > li.clr1.active a{
color:#fff;
background: #F55;
}
.navbar-inverse .navbar-nav > li.clr2 a:hover, .navbar-inverse .navbar-nav > li.clr2.active a{
color: #fff;
background:#973CB6;
}
.navbar-inverse .navbar-nav > li.clr3 a:hover, .navbar-inverse .navbar-nav > li.clr3.active a{
color: #fff;
background:#5EC64D;
}
.navbar-inverse .navbar-nav > li.clr4 a:hover, .navbar-inverse .navbar-nav > li.clr4.active a{
color: #fff;
background: #29AAE2;
}
.navbar-default{
background-color: #3b5998;
font-size:14px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="about.html">Programming</a></li>
<li class="clr3"><a href="courses.html">English</a></li>
<li class="clr4"><a href="login.html">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row" style="margin-top:60px;">
<div class="col-md-4 col-md-offset-4">
<form method="POST" action="" accept-charset="UTF-8" role="form" id="loginform">
<fieldset>
<h3 style="color:dimgray; text-align: center">Please sign in</h3>
<hr>
<input class="form-control email-title" placeholder="E-mail" name="email" type="text">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
<a class="pull-right" href="">Forgot password?</a>
<div class="checkbox" style="width:140px;">
<label><input name="remember" type="checkbox" value="Remember Me"> Remember Me</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
<p class="text-center" style="margin-top:10px;">OR</p>
<a class="btn btn-default btn-block" href=""><i class="icon-github"></i> Login with Github</a>
<br>
<p class="text-center"><a href="">Register for an account?</a></p>
</fieldset>
</form>
</div>
</div>
</div>
<!-- /.navbar -->
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
</div>
</div>
</body>
</html>
