Home
CSS
CT Projects

Creating Login/Register Page UI in HTML, CSS and JavaScript

Learn how to create a login/register form with CSS and Javascript. It's an simple login/Register Page UI. Smooth & fast
9 min read

Introduction


HTML represents HyperText Markup Language. This is the main markup language that can be utilized to make a page. It is utilized to show text, picture, sound, and video in a website page. 


CSS represents Cascading Style Sheets. It is utilized to style HTML records. CSS can make responsive site pages and is utilized for styling and its assortment of organizing rules. It is utilized for planning purposes. The CSS augmentation is (.CSS). 


There are three sorts of CSS: 

  1. Inline CSS
  2. Internal CSS
  3. External CSS


JavaScript is the Programming Language for the Web. It can refresh and change both HTML and CSS. It can figure, control and approve information.


Steps to create Login / Register Page UI


Step 1 : Creating Folder


Make another folder and give a name to the organizer. In the folder save a HTML and CSS and Javascript files. In the wake of making the envelopes, open the content tool. 


Step 2 : Creating with HTML


Snap File, Select New File, and Click Save. Give the document the name "index.html". 

Presently, connect the HTML and CSS to the HTML document you just duplicated and glue this code in the heading tag: 


<head>

 <title>Login/Register Page UI</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>


Step 3: Body of HTML 


Then, make a construction for the login page and Register page utilizing HTML, Username and Password, Name etc using input element. here we are using onclick event to javascript functions and CSS classes & Id selectors. Before the body element end we have connected javascript to the html "index.html" file using script element.


<body>


<!-- Login Page -->

<div id="login">

<h2>Welcome Back</h2>

<input type="email" placeholder="Email" id="email" required/>

</br>

<input type="password" placeholder="Password" id="password" required/>

<br/>

<p class="fp" >Forgot password?</p>

<br/>

<button id="signUp">Sign In</button>

<p class="sup">Don't have an account? <span onclick="myRegister();" >Sign Up</span></p>

</div>


<!-- Register Page -->

<div id="register" >

<h2>Sign Up</h2>

<input type="text" placeholder="Name" id="name" required/>

<br/>

<input type="email" placeholder="Email" id="email" required/>

<br/>

<input type="password" placeholder="Password" id="password" required/>

<br/>

<input type="password" placeholder="Confirm Password" id="password" required/>

</br>

<button id="signUp">Register</button>

<p class="sup" >Already have an account, <span onclick="myLogin();">Login</span>

</p>

</div>


<script src="app.js"></script>

</body>


Step 4: Styling with CSS


Then, click File, then, at that point New File, and snap Save. Give the document the name "style.css".

Then, compose code in CSS to apply some style to the HTML so you can change the vibe of the login and register page. 


body {

    margin:0;

    background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);

    padding:30;

    align-items:center;

    justify-content:center;

}

input {

    width:240px;

    margin:0px auto;

    height:40px;

    display:block;

    outline:none;

    padding:0px 15px;

    border:2px solid #404040;

    border-radius:5px

}

input:focus {

    border:2px solid blue;

}

button {

    width:250px;

    background-color:#404040;

    height:40px;

    margin:0px auto;

    color:white;

    border-radius:5px;

    font-weight:bold;

    display:block;

    border:2px solid tomato;

}

button:active {

    box-shadow:0px 0px 7px tomato;

}

#login {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}

.fp {

    text-align:center;

    margin-top:-15px;

    font-size:14px;

    position:absolute;

    left:50%;

}

.sup {

    text-align:center;

}

span {

    color:blue;

    text-decoration:underline;

}

h2 {

    text-align:center;

    margin-bottom:30px;

}


#register {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    display:none;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}


#register.show {  visibility: visible ; } 


Step 5: JavaScript for Functions


After creating CSS file, click on File, then, at that point New File, and snap Save. Give the document the name "app.js".


Then, compose code in javascript to apply functions work properly with the HTML so you can change the vibe of the login and register page. These code is just use to hide/Show the pages respectively whenever user click on sign-up & login. 


function myRegister() {

 var lh = document.getElementById("login").style.display="none";

  

  var rs=document.getElementById("register").style.display="block";

 } 

 function myLogin() {

 var rh = document.getElementById("register").style.display="none";

  

  var ls=document.getElementById("login").style.display="block";

 } 


Yeah, we are done with login/register page UI. 


You can merge all the files in one file. Simply you have to use inline elements for CSS & JavaScript respectively. You can see in below full source code.


Full Source Code:


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login/Register Page UI</title>

 <style>

  body {

    margin:0;

    background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);

    padding:30;

    align-items:center;

    justify-content:center;

}

input {

    width:240px;

    margin:0px auto;

    height:40px;

    display:block;

    outline:none;

    padding:0px 15px;

    border:2px solid #404040;

    border-radius:5px

}

input:focus {

    border:2px solid blue;

}

button {

    width:250px;

    background-color:#404040;

    height:40px;

    margin:0px auto;

    color:white;

    border-radius:5px;

    font-weight:bold;

    display:block;

    border:2px solid tomato;

}

button:active {

    box-shadow:0px 0px 7px tomato;

}

#login {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}

.fp {

    text-align:center;

    margin-top:-15px;

    font-size:14px;

    position:absolute;

    left:50%;

}

.sup {

    text-align:center;

}

span {

    color:blue;

    text-decoration:underline;

}

h2 {

    text-align:center;

    margin-bottom:30px;

}


#register {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    display:none;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}


#register.show { visibility: visible ; }

 </style>

</head>

    

<body>

<!-- Login Page -->

<div id="login">

<h2>Welcome Back</h2>

<input type="email" placeholder="Email" id="email"/>

</br>

<input type="password" placeholder="Password" id="password"/>

<br/>

<p class="fp" >Forgot password?</p>

<br/>

<button id="signUp">Sign In</button>

<p class="sup">Don't have an account? <span onclick="myRegister();" >Sign Up</span></p>

</div>


<!-- Register Page -->

<div id="register" >

<h2>Sign Up</h2>

<input type="text" placeholder="Name" id="name"/>

<br/>

<input type="email" placeholder="Email" id="email"/>

<br/>

<input type="password" placeholder="Password" id="password"/>

<br/>

<input type="password" placeholder="Confirm Password" id="password"/>

</br>

<button id="signUp">Register</button>

<p class="sup" >Already have an account, <span onclick="myLogin();">Login</span>

</p>

</div>

        

<script>

 function myRegister() {

 var lh = document.getElementById("login").style.display="none";

  

  var rs=document.getElementById("register").style.display="block";

 } 

 function myLogin() {

 var rh = document.getElementById("register").style.display="none";

  

  var ls=document.getElementById("login").style.display="block";

 } 

 </script>

    </body>

</html> 


CodePen Output:


Introduction


HTML represents HyperText Markup Language. This is the main markup language that can be utilized to make a page. It is utilized to show text, picture, sound, and video in a website page. 


CSS represents Cascading Style Sheets. It is utilized to style HTML records. CSS can make responsive site pages and is utilized for styling and its assortment of organizing rules. It is utilized for planning purposes. The CSS augmentation is (.CSS). 


There are three sorts of CSS: 

  1. Inline CSS
  2. Internal CSS
  3. External CSS


JavaScript is the Programming Language for the Web. It can refresh and change both HTML and CSS. It can figure, control and approve information.


Steps to create Login / Register Page UI


Step 1 : Creating Folder


Make another folder and give a name to the organizer. In the folder save a HTML and CSS and Javascript files. In the wake of making the envelopes, open the content tool. 


Step 2 : Creating with HTML


Snap File, Select New File, and Click Save. Give the document the name "index.html". 

Presently, connect the HTML and CSS to the HTML document you just duplicated and glue this code in the heading tag: 


<head>

 <title>Login/Register Page UI</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>


Step 3: Body of HTML 


Then, make a construction for the login page and Register page utilizing HTML, Username and Password, Name etc using input element. here we are using onclick event to javascript functions and CSS classes & Id selectors. Before the body element end we have connected javascript to the html "index.html" file using script element.


<body>


<!-- Login Page -->

<div id="login">

<h2>Welcome Back</h2>

<input type="email" placeholder="Email" id="email" required/>

</br>

<input type="password" placeholder="Password" id="password" required/>

<br/>

<p class="fp" >Forgot password?</p>

<br/>

<button id="signUp">Sign In</button>

<p class="sup">Don't have an account? <span onclick="myRegister();" >Sign Up</span></p>

</div>


<!-- Register Page -->

<div id="register" >

<h2>Sign Up</h2>

<input type="text" placeholder="Name" id="name" required/>

<br/>

<input type="email" placeholder="Email" id="email" required/>

<br/>

<input type="password" placeholder="Password" id="password" required/>

<br/>

<input type="password" placeholder="Confirm Password" id="password" required/>

</br>

<button id="signUp">Register</button>

<p class="sup" >Already have an account, <span onclick="myLogin();">Login</span>

</p>

</div>


<script src="app.js"></script>

</body>


Step 4: Styling with CSS


Then, click File, then, at that point New File, and snap Save. Give the document the name "style.css".

Then, compose code in CSS to apply some style to the HTML so you can change the vibe of the login and register page. 


body {

    margin:0;

    background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);

    padding:30;

    align-items:center;

    justify-content:center;

}

input {

    width:240px;

    margin:0px auto;

    height:40px;

    display:block;

    outline:none;

    padding:0px 15px;

    border:2px solid #404040;

    border-radius:5px

}

input:focus {

    border:2px solid blue;

}

button {

    width:250px;

    background-color:#404040;

    height:40px;

    margin:0px auto;

    color:white;

    border-radius:5px;

    font-weight:bold;

    display:block;

    border:2px solid tomato;

}

button:active {

    box-shadow:0px 0px 7px tomato;

}

#login {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}

.fp {

    text-align:center;

    margin-top:-15px;

    font-size:14px;

    position:absolute;

    left:50%;

}

.sup {

    text-align:center;

}

span {

    color:blue;

    text-decoration:underline;

}

h2 {

    text-align:center;

    margin-bottom:30px;

}


#register {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    display:none;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}


#register.show {  visibility: visible ; } 


Step 5: JavaScript for Functions


After creating CSS file, click on File, then, at that point New File, and snap Save. Give the document the name "app.js".


Then, compose code in javascript to apply functions work properly with the HTML so you can change the vibe of the login and register page. These code is just use to hide/Show the pages respectively whenever user click on sign-up & login. 


function myRegister() {

 var lh = document.getElementById("login").style.display="none";

  

  var rs=document.getElementById("register").style.display="block";

 } 

 function myLogin() {

 var rh = document.getElementById("register").style.display="none";

  

  var ls=document.getElementById("login").style.display="block";

 } 


Yeah, we are done with login/register page UI. 


You can merge all the files in one file. Simply you have to use inline elements for CSS & JavaScript respectively. You can see in below full source code.


Full Source Code:


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login/Register Page UI</title>

 <style>

  body {

    margin:0;

    background:linear-gradient(45deg,#ff6551 0,#ff6551 13%,#ff6551 35%,#ffb351 100%);

    padding:30;

    align-items:center;

    justify-content:center;

}

input {

    width:240px;

    margin:0px auto;

    height:40px;

    display:block;

    outline:none;

    padding:0px 15px;

    border:2px solid #404040;

    border-radius:5px

}

input:focus {

    border:2px solid blue;

}

button {

    width:250px;

    background-color:#404040;

    height:40px;

    margin:0px auto;

    color:white;

    border-radius:5px;

    font-weight:bold;

    display:block;

    border:2px solid tomato;

}

button:active {

    box-shadow:0px 0px 7px tomato;

}

#login {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}

.fp {

    text-align:center;

    margin-top:-15px;

    font-size:14px;

    position:absolute;

    left:50%;

}

.sup {

    text-align:center;

}

span {

    color:blue;

    text-decoration:underline;

}

h2 {

    text-align:center;

    margin-bottom:30px;

}


#register {

    width:auto;

    height:auto;

    padding:30px 20px;

    border-radius:5px;

    vertical-align:center;

    justify-content:center;

    display:none;

    border:5px ridge white;

    box-shadow:0px 0px 10px white;

}


#register.show { visibility: visible ; }

 </style>

</head>

    

<body>

<!-- Login Page -->

<div id="login">

<h2>Welcome Back</h2>

<input type="email" placeholder="Email" id="email"/>

</br>

<input type="password" placeholder="Password" id="password"/>

<br/>

<p class="fp" >Forgot password?</p>

<br/>

<button id="signUp">Sign In</button>

<p class="sup">Don't have an account? <span onclick="myRegister();" >Sign Up</span></p>

</div>


<!-- Register Page -->

<div id="register" >

<h2>Sign Up</h2>

<input type="text" placeholder="Name" id="name"/>

<br/>

<input type="email" placeholder="Email" id="email"/>

<br/>

<input type="password" placeholder="Password" id="password"/>

<br/>

<input type="password" placeholder="Confirm Password" id="password"/>

</br>

<button id="signUp">Register</button>

<p class="sup" >Already have an account, <span onclick="myLogin();">Login</span>

</p>

</div>

        

<script>

 function myRegister() {

 var lh = document.getElementById("login").style.display="none";

  

  var rs=document.getElementById("register").style.display="block";

 } 

 function myLogin() {

 var rh = document.getElementById("register").style.display="none";

  

  var ls=document.getElementById("login").style.display="block";

 } 

 </script>

    </body>

</html> 


CodePen Output:



Conclusion:


We have effectively made a Login page. I trust this article is valuable to you. On the off chance that you have any remarks in this article, kindly ask in the remark segment.

Post a Comment