Cara Membuat Login Form di Navbar

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 4, 2021

Di bawah ini kita akan mempelajari cara membuat menu navigasi responsif dengan form login di dalamnya menggunakan CSS.

Login Form di Navbar

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #FF6347;
  color: black;
}

.topnav a.active {
  background-color:	#B22222;
  color: white;
}

.topnav .login-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width:120px;
}

.topnav .login-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background-color: #6495ED;
  color: white;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .login-container button:hover {
  background-color: blue;
}

@media screen and (max-width: 600px) {
  .topnav .login-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Beranda</a>
  <a href="#about">Tentang</a>
  <a href="#contact">Kontak</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Username" name="username">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

<div style="padding-left:16px">
<h2> Login Form di Navbar </h2>
   <p> Menu navigasi dengan form login dan submit button di dalamnya. </p>
   <p> Ubah ukuran jendela browser untuk melihat efek responsif. </p>
</div>

</body>
</html>

Cara Menambahkan Login Form di Navbar

Langkah 1) Tambahkan HTML:
Contoh

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Username" name="username">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

* {box-sizing: border-box;}

/* Style untuk navbar */
.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

/* Link Navbar  */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Link Navbar saat mengarahkan mouse */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* link aktif atau link saat ini  */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style untuk container input  */
.topnav .login-container {
  float: right;
}

/* Style untuk field input disamping navbar */
.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width: 150px; /* sesuaikan seperlunya (selama tidak merusak topnav) */
}

/* Style untuk button disamping container input */
.topnav .login-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .login-container button:hover {
  background: #ccc;
}

/* Tambahkan responsiveness - Pada layar kecil, tampilkan bar navigasi secara vertikal, bukan horizontal */
@media screen and (max-width: 600px) {
  .topnav .login-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}