بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh
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>
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI),
Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin
وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh
Artikel Tutorial Bootstrap : Membuat form login, Diterbitkan oleh scodeaplikasi pada Selasa, 20 Oktober 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software,
membeli source code ,Dengan Cara menghubungi saya
Ke Email: Fajarudinsidik@gmail.com, atau
No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.
