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
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
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
<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>
<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;
}
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 .
0 Response to "Cara Membuat Form Login dengan HTML Sederhana Berada pada Navbar"
Post a Comment