Bagaimana membuat: formulir login di dalam menu

Bagaimana menambahkan formulir login di dalam navbar

Pertama - Tambahkan HTML：

<div class="topnav">
  <a class="active" href="#home">Rumah</a>
  <a href="#about">Tentang</a>
  <a href="#contact">Hubungi</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Nama Pengguna" name="username">
      <input type="text" placeholder="Kata Laluan" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

Ketiga - Tambahkan CSS：

* {keboxing: kotak;}
/* Tetapkan gaya navigasi */
.topnav {
  kelebaran: tersembunyi;
  warna belakang: #e9e9e9;
}
/* Tetapkan gaya link navigasi */
.topnav a {
  apung: kiri;
  pameran: blok;
  warna: hitam;
  teks-alin: tengah;
  keluarkan: 14px 16px;
  garis ganti tulisan: tiada;
  ukuran tulisan: 17px;
}
/* Tetapkan gaya link saat kursor berada di atas */
.topnav a:hover {
  warna belakang: #ddd;
  warna: hitam;
}
/* Tetapkan gaya link aktif/sesuai */
.topnav a.active {
  warna belakang: #2196F3;
  warna: putih;
}
/* Tetapkan gaya container input */
.topnav .login-container {
  apung: kanan;
}
/* Tetapkan gaya input dalam navigasi */
.topnav input[type=text] {
  keluarkan: 6px;
  jarak atas: 8px;
  ukuran tulisan: 17px;
  sambungan: tiada;
  lebar: 150px; /* Sesuaikan berdasarkan keperluan (tetapi jangan merosakkan navigasi atas) */
}
/* Tetapkan gaya butang dalam container input */
.topnav .login-container button {
  apung: kanan;
  keluarkan: 6px;
  jarak atas: 8px;
  jarak kanan: 16px;
  belakang: #ddd;
  ukuran tulisan: 17px;
  sambungan: tiada;
  pengecam: pengecam;
}
.topnav .login-container button:hover {
  belakang: #ccc;
}
/* Menambahkan kebolehan responsif - di skrin kecil, tampilkan navigasi secara vertikal bukannya horizontal */
@media screen and (max-width: 600px) {
  .topnav .login-container {
    apung: tiada;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    apung: tiada;
    pameran: blok;
    teks-alin: kiri;
    lebar: 100%;
    jarak: 0;
    keluarkan: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

cobalah sendiri