Cara Membuat Form Login dengan HTML Sederhana Berada pada Navbar

Form login adalah bagian dari website untuk membatasi user untuk mengakses beberapa fitur yang disediakan website atau aplikasi. Dapat dibilang juga sebagai pengaman baik untuk website ataupun data yang akan digunakan user menjadi fitur yang hanya dapat diakses ketika user tersebut telah login. Berikut kode HTLM untuk form login diletakan pada navbar

Baca juga : Cara Membuat Navigasi Bar NavBar Dropdown Transparan HTML CSS Sederhana 

<ul>
<li>
<a class="active" href="#home">Home</a>
</li>
<li class="dropdown">
<a class="dropbutton" href="#">DropdownMenu</a>
<label class="dropdown-content">
<a href="#">Menu 1</a>
    <a href="#">Menu 2</a>
    <a href="#">Menu 3</a>
</label>
</li>

<li class="form-login">
<form action="">
<label>Username:</label>
<input type="text" name="username">

<label>Password:</label>
<input type="text" name="password">

<input type="submit" value="LogIn">
</form>
</li>
</ul>

Kode di atas diletakan pada bagian <body> di sini </body>. Form action adalah Tag HTML yang berfungsi untuk memberitahukan tujuan data yang diisikan user akan dikirimkan. Berikut kode css untuk form login agar lebih akurat penempatannya


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

.active {
    background-color: #FF0B7B;
}

li label {
color: white;
}
.form-login {
float: right;
margin-top: 10px;
margin-right: 10px;
}

Letakan kode css di atas pada tag <style> di sini </style>. class form-login terdpat fungsi float yang berfungsi untuk memposisikan form login berada ketika float : left; maka form login akan berada pada bagian kiri navbar. sedangkan margin berfungsi memberikan jarak form login agar lebih akuran .
Demikian cara membuat form login, semoga dapat bermanfaat. oiyaa jika dari semua postingan saya ada kekurangan saya tunggu komentarnya ya sob. Terima kasih

0 Response to "Cara Membuat Form Login dengan HTML Sederhana Berada pada Navbar"

Post a Comment

Silahkan berkomentar Sob tapi untuk beberapa komentar yang tidak sesuai seperti link aktif dan hal-hal yang tidak baik tidak akan ditampilkan !. Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel