How to Create a Login Form with Simple HTML Located on the Navbar

The login form is part of the website to restrict users from accessing some of the features provided by the website or application. It can also be said as a security for both the website and the data that will be used by the user, becoming a feature that can only be accessed when the user has logged in. The following HTLM code for the login form is placed on the navbar:

Also read: How to Make a Transparent NavBar Dropdown Navigation Bar Simple HTML CSS



Menu 1
Menu 2
Menu 3

The code above is placed in the section here. Form action is an HTML tag that serves to notify the purpose of the data entered by the user to be sent. Here’s the css code for the login form for a more accurate placement

ul {
list-style-type: none;
margins: 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;

Put the above css code in the here tag. The form-login class has a float function that functions to position the login form when float : left; then the login form will be on the left of the navbar. while the margin serves to provide distance for the login form to be more accurate.

That’s how to make a login form, hopefully it can be useful. Oh yeah, if from all my posts there are shortcomings, I’m waiting for the comments, friend. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *