Pada tutorial sebelumnya kita telah menyinggung tentang pembuatan menu dropdown pada navbar bootstrap. Sedangkan tutorial kali ini, kita akan menambahkan form login pada menu dropdown.
Jadi nantinya ketika user, mengklik menu pada navbar maka akan muncul form login seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
Karena tutorial ini erat kaitannya dengan tutorial sebelumnya, jadi untuk memahami secara keseluruhan maka pastikan anda telah membaca tutorial : menu dropdown navbar.
Setelah anda memahami tutorial tersebut, sekarang coba tempatkan kode dibawah ini pada bagian yang ingin anda letakkan. Dalam tutorial ini, menu "Web" kita gantikan dengan menu "Login", kemudian ditambahkan kode dibawah ini :
<li class="clr4 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
<ul class="dropdown-menu" style="padding: 20px 10px 5px 10px; width:300px;">
<li>
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</li>
</ul>
</li>Karena kita membuat sebuah form login, tentunya kita mulai dengan tag <form>...</form>. Ada beberapa jenis form yang dapat kita buat dalam bootstrap,yaitu:
- form vertical
- form horizontal
- form inline
Dalam percobaan ini, karena kita menggunakan tag <form>...</form>, tag tersebut secara default akan membentuk form vertical.
Pada kode diatas terdapat potongan kode sebagai berikut :
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>Perhatikan kode diatas, terdapat <div class="form-group">, kode ini bertujuan untuk mengroupkan tipe inputan sehingga akan memiliki jarak antar sesama inputan. Dimana kode tersebut akan membuat margin-botton:15px. Ini artinya, elemen berikutnya akan terbuat dengan jarak 15px dari elemen diatas.
Jika seandainya kita menghilangannya, maka tampilan form login akan menjadi kurang pas seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Perhatikan Gambar.1 dan Gambar.2 secara seksama pada bagi form loginnya. Tentunya form login pada Gambar.1 lebih indah dibandingkan Gambar.2
Source code lengkapnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Dropdown Login pada Navbar</title>
<!-- Bagian css -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/informatika.css">
<script src="assets/js/jquery-1.10.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<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">Dunia Informatika</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Java</a></li>
<li class="clr3"><a href="">English</a></li>
<li class="clr4 dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Login<span class="caret"></span></a>
<ul class="dropdown-menu" style="padding: 20px 10px 5px 10px; width:300px;">
<li>
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>