Last Updated on April 20, 2023 by Roshan Parihar
A simple login form in HTML should contain form fields username and password. Users enter their email in the username field and enter a password to make a login into the website.
To access the private content of the website, users need to make login using the login form. You need a simple HTML design for the login form to make it simple for users to enter login credentials.
You can add simple HTML code with some CSS to make the design looks beautiful to your users. So, let’s create the login form with the process given below.
How to Create Simple Login Form in HTML with CSS
Here is the step-by-step process to create a simple login form in HTML and CSS:-
Step 1: HTML Structure of Login Form
To make the login form, you have to wrap every form field inside the <form> tag. There are two input elements that you have to use in the login form that is username and password.
Let’s learn each input field required to create the correct login form.
Add Username Field Using <input type="email">
It is the most common field in the login form that takes a username in the form of an email address. The username of the users should be unique for every person to easily identify them from others. Email address is unique and can not be the same in any manner.
|
1 |
<input type="email" name="username" class="email" placeholder="Enter your username" required> |
Add Password Field Using <input type="password">
The password field takes the password from users to make login using the form. It can be a mixture of alphabets, numbers, symbols, and special characters to make it difficult and secure as possible. Users cannot see their entered characters in this input field.
|
1 |
<input type="password" name="password" class="password" placeholder="Enter your password" required> |
Add CTA Button Field Using <input type="submit">
To allow users make login after they enter their username and password, you will have to add CTA(Click to add) button to submit the login form. It should be of submit type for the submission of the login form. Add this field to the end of the above two input fields inside the form before the </form> closing tag.
|
1 |
<input name="submit" type="submit" value="Submit"> |
Final HTML Structure of Login Form
Now, the final structure of the login form is given below. It is the combination of all the above fields and the <label> with these fields. See the below code to get the idea of using the login form fields in simple HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="main-login-form"> <form action="#" method="POST"> <label for="Username">Username</label> <input type="email" name="username" class="email" placeholder="Enter your username" required> <label for="Password">Password</label> <input type="password" name="password" class="password" placeholder="Enter your password" required> <input name="submit" type="submit" value="Submit"> </form> </div> |
When you run the above HTML code, you will get the simple login form without any CSS. You cannot use it on your website as it should look beautiful with a better design. For this, let’s add some CSS to it to make it look better for your website.
Step 1: Add CSS for the Look and Feel of the Login Form
Below is the simple CSS code that can change the overall appearance of your simple HTML login form. It can change the appearance of fields like username, password, and CTA submits button. It also gives a background and border to the login form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> input[type='password'],input[type='email']{ width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px; } input[type='password']:focus,input[type='email']:focus{ border: 1px solid #5db6db; box-shadow: 0 0 10px #b9eaff; outline: none !important; } input[type='submit']{ background: rgb(39,160,210); color: #fff; border: none; padding: 10px 20px; cursor: pointer; } .main-login-form{ max-width: 400px; margin: 0 auto; background: #f5f5f5c7; padding: 20px 45px 20px 25px; border-radius: 5px; border: 1px solid #ccc; } </style> |
When you add the above CSS code with the simple login form HTML code, you will get the appearance of the login form as shown in the image below. It contains accurate spacing and padding with some border and background. The background and border display the covered area of the login form.
You can change the appearance of the input fields as well as the button as per your requirements. Modify the above CSS code and change the appearance to match your brand color.
Step 3: Complete Code
Below is the complete code of the simple HTML login form. I have added CSS code inside the head tag just before the closing tag </head>. Added the structure code of the login form inside the <body> tag. You can use the below code for your website login page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html lang="en"> <head> <title>Simple Login Form in HTML and CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> input[type='password'],input[type='email']{ width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc; margin-top: 10px; margin-bottom: 20px; } input[type='password']:focus,input[type='email']:focus{ border: 1px solid #5db6db; box-shadow: 0 0 10px #b9eaff; outline: none !important; } input[type='submit']{ background: rgb(39,160,210); color: #fff; border: none; padding: 10px 20px; cursor: pointer; } .main-login-form{ max-width: 400px; margin: 0 auto; background: #f5f5f5c7; padding: 20px 45px 20px 25px; border-radius: 5px; border: 1px solid #ccc; } </style> </head> <body> <div class="main-login-form"> <form action="#" method="POST"> <label for="Username">Username</label> <input type="email" name="username" class="email" placeholder="Enter your username" required> <label for="Password">Password</label> <input type="password" name="password" class="password" placeholder="Enter your password" required> <input name="submit" type="submit" value="Submit"> </form> </div> </body> </html> |
Furthermore, if you want to create a login form with a session using the above form, you can read our next post whose link is given below. or insert its submission data into the database. You can read the post whose link is given below.
You May Also Like to Read