Hello Coders, In this article we are going to learn How to build Login and Sign Up or Registration form using HTML and CSS. Its going to be a neumorphism design. 

What is Neomorphism ?

    You have heard this word right? So lets understand what it really is. Neomorphism is a new design trend and it has gained a lot of attention in a very short period of time. Its all about little contrast and solid colors. You can  clearly see it in action in the below demo.

Here are posts you might also like :

In this HTML and CSS Tutorial article, I have provided both video tutorial and a step by step guide on how to build Login and Registration page using HTML and CSS. And for your reference, I have also provided complete Free Source Code at the end of this article.

Login and Sign Up Form using HTML CSS and JavaScript | Video Tutorial

Watch the video tutorial if you are complete beginner or you are finding it hard to follow along with this article. In the video I have shown how to build it step by step.

Login and Registration Page in HTML CSS and JavaScript | Source Code

Now lets start building it. Follow the below steps to build it. You can have a look at the final demo if you are curios about how it is going to look once done.

How do I create Registration / Sign Up Page in HTML? Free HTML source code
Create an index.html file. and add the HTML boiler plate, meaning add the basic structure of an HTML document, like html, head, title, body tags. Create a main div in which it is going to hold our login form code and sign up form code. Once done follow the below steps.

Step 1 : Inside the index.html file. First lets add some html code for Registration or Sign Up. Lets create a separate form element and inside lets add some icons, like facebook, linkedin, twitter Icons. You can download the svg files from the link at the end of this article.

    Once done, now we will add our input elements for name, email, password and also a button which says 'SIGN UP'. Copy or refer below source code.

How do I create Login / Sign In Page using HTML? Free HTML Source code of Login Form
Inside the same index.html and inside the same main div, we will create a login form. Follow the below step

Step 2 : Now lets add our HTML code for the login or Sign In. There also we will use the same svg icons which we used for the registration page. For login page we will need email , password input elements, an Forgot password link and an Sign In button. Copy or refer below source code.

Step 3 : Now we need to add a switch container. You can see in the final demo that, when user wants to Sign In, It says Welcome back and when the users wants to sign up it says Hello, Friend. So lets build that.

    One container will be visible and another container will be visible when clicked on the button which we will implement using JavaScript.

Output after adding HTML : 

create Login / Sign In Page using HTML Free HTML Source code of Login Form

How do I design Login and Registration page with CSS | Free CSS Source Code
Create a styles.css file and link the css file to our html document. Follow the below step to design sign in and sign up form using css.

Step 4 : We will use custom font i.e Montserrat which is imported from the google fonts. Below is the step by step css code. Type it from top to bottom and observe the changes it makes.

Output after adding CSS :

design Login and Registration page with CSS | Free CSS Source Code

How to build Sign In and Sign Up page using JavaScript | Free JavaScript Source Code
Create a script.js file and link the jaavascript file to our html document. Follow the below step to add javascript to our project and make it work.

Step 5 : The first thing we have do in any javascript file is to grab the elements that we need from the DOM.

Step 6 : By Default when we click on a button which is in the form element. It tries to submit the form and refreshed the page. So, we need to prevent that from happening. We can do it by accessing the event and calling preventDefault() Function.

    After this, we will create a function to switch between Sign in and Sign up Form element. and we will set event listeners so that it happens when we click on those buttons.

Its Done, You have completed this project. This is what you should be having at the end.

Final Demo of Login and Registration Page :

CSS Neumorphism Login and Sign Up Form Design

Thank you for Reading this Article

Credits : Ricardo Oliva Alonso

Sign In and Sign Up Form using HTML CSS JAVASCRPT | Download Source Code :

Download Code Files

Post a Comment

Previous Post Next Post