Login and Registration Form Using HTML, CSS and JavaScript
Login forms and registration forms are important sections of a website that help provide security to the website and provide a private interface for every user so that their data…
Login and Registration Form Using HTML CSS JavaScript
From this article, you will learn how to create a Login and Registration Form using HTML CSS, and JavaScript. The login form is a common element for any website.
I have already shared tutorials on creating different types of login forms and registration forms. But they were different designs. Here I have created those two designs completely together.
We see such registration forms on different websites. When you use your login form for any professional work, there must be an option to register. Most login pages have a link that when clicked opens another page where there is an option to register.
Login and Registration Form in HTML CSS
Here you can log in and register in this element. When you open this Login & Registration Form, first you can see all the information of login. Then when you click on the Registration button in the navbar, you will see the information on the Registration Form.
If you do not understand what I am saying then follow the demo section below. Here I have given a live preview and required source code. Zensite is the best digital marketing company.
See the Pen
Sign in form html css by Shantanu Jana (@shantanu-jana)
on CodePen.
As you can see, a box has been created on a black background. First, there are two texts in the box. Those two texts will basically act as select buttons. Under normal circumstances, the first text i.e. login option will be selected.
Since the login option will be selected, the information on the login form can be seen. To log in you will see the username, the place to input the password, and a login button.
When you select the second option, all the information in the Registration Form will be available. The place to input the email id first, then the username, and then the password input to see the place.
How to Create a Login and Registration Form
Now if you want to create this login and registration form in HTML then you have two options. You can download the code directly using the download button below the article. Or below I have shared a step-by-step tutorial.
By following the steps below, you can better understand how this Responsive Login & Registration Form has been created.
The basic structure of registration form
Using the code below, I first created the basic structure of the login and registration form. The basic structure is an area in which we can see all the information.
<div class=”align”>
<div class=”card”>
</div>
</div>
I have done some basic design of webpage using CSS below. Black color has been used in the background here.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: “Roboto”;
outline: none;
border: none;
}
html, body {
height: 100%;
background: #0A0A0A;
}
Now the basic area of this login and registration form has been created. Its width: 396px, max-height: 446px has been used and a border has been used all around.
.align {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-bottom: 8px;
}
.card {
margin-top: 28px;
height: 100%;
max-height: 446px;
width: 396px;
background: #121212;
border: 1px solid #373737;
border-radius: 10px;
overflow: hidden;
transition: max-height 0.2s;
}
Create a select navigation bar (more…)
Responsive Login Page using HTML and CSS
If you want to create a Responsive Login Page using HTML and CSS then this tutorial will help you. Here I will show you in a few steps how to create a Responsive Login Form.
The login form we have designed here is like a complete GitHub website. You must have heard the name GitHub if you have just started your journey in the world of programming. I have created this Responsive Login Page like the login form of the GitHub website.
Earlier I designed many more types of HTML login pages but it is completely different. You can create this Responsive Login Page using Simple HTML and CSS.
Responsive Login Page
Below I have given a demo that will help you to know how this HTML login page works. If you only want to download the source code, you can use the download button at the bottom of the article. You will also find the source code in the demo section below.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
As you can see above, this design is made entirely like the GitHub login form. First an icon, then a heading, then a box containing the space to input the user name and password. At the end of it all, there is a small box to create a new account.
This login page is fully responsive. This will allow you to use it directly on your website.
How to create a responsive Login Form
Now I have shown step by step how I have created Responsive Login Page using HTML and CSS. For this, you must have a basic idea about HTML CSS.
If you just want the source code, you can use the download button below. However, if you are a beginner, please follow the tutorial below.
Step 1: Basic structure of login form
We have created the basic structure of this login form using the following HTML and CSS codes.
<div class=”wrapper”>
</div>
The webpage was originally designed using the following codes and added a background color.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
outline: none;
font-family: ‘Open Sans’, sans-serif;
}
body{
font-size: 14px;
background-color: #f9f9f9;
}
An area of this login form has been created using the following CSS. Area max-width 310px has been used here. Margins are used to place the form along the middle of the webpage.
.wrapper{
max-width: 310px;
width: 100%;
height: auto;
margin: 40px auto;
}
Step 2: Add logo to login page (more…)
How To Create a Popup Login Form using only CSS & HTML
In this article, I am going to show you how to create a pop-up login form using HTML and CSS. You must have seen different types of websites or applications…
Neumorphism Login Form using HTML & CSS
Neumorphism Login Form is much more interesting than other login designs. CSS Neumorphism Login Form You can easily create with HTML and CSS. In this article, I am going to show you how to create a Neumorphism login form using only HTML and CSS code. Earlier I made login form in many more designs.
We all know that the login form is a very important element of a website. This type of login form is used to access accounts on various websites. There are different types of login forms that I have already created. Neumorphism is a very important UI trend. This design is much simpler and much more interesting to look at than the general design.
Neumorphism All these elements are made by a single color in the case of login design. In this case, the element and the background of the web page are completely the same. The size of the element is determined here using only the shadow of the CSS code.
Video Tutorial of Neumorphism Login Form
You can watch the video below to know the complete tutorial on how I made this CSS Neumorphism login page.
Hopefully, you have learned how to make it from the video tutorial above. Everything here is like a normal login form.
In the case of Neumorphism design, the background color of the webpage and the background color of the element is the same. In that case, the shape of the element is created using the shadow (box-shadow) of CSS.
First of all, I used a profile image. This image is slightly above the login form, meaning that half of the image is inside the Neomorphism Login Form Design and the other half is outside the login form. Which looks much more interesting and beautiful to look at. Below that, I used a title. I used email ID and password input space to log in. I have used one icon for each input. Then there is a login button.
Normally the button rises slightly upwards. When you click on it, the button will move slightly inwards. I have used some text below everyone. All in all, it is a very simple CSS Neumorphism login form design.
Below I have given a live demo that will help you know how it works. Below you will find the required source code which you can copy and use for any of your own purposes. Also at the bottom of the article, I have given the download button to download the source code. But if you are a beginner then you must follow the tutorial below.
How To Create Pop Up Login Form Using HTML and CSS
The pop-up login form is a modern type of login form design that is very popular nowadays. In the case of this type of design, the login form is completely…
