Hello everyone, In this article I’m share a Signup Login Form using HTML, CSS and Javascript. Signup and Login Form is very important to all the website and also it’s helpful to collect information when any fill form So let’s start to create Login Form.
Before start to create this I’m share the information that which file create first.
- first of all create a HTML file for the structure your form and use index.html extension for create a html file.
- For design like color, margin, padding, border and more use CSS file for create a style.css extension so that Signup Login Form proper align.
- Create a Javascript so that you can use function with javascript. for that use index.js file.
After create this all file use read below and copy code.
Use HTML code in html file for create signup login form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Signup Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body id="bg">
<div class="container">
<div class="image">
</div>
<div class="formbox">
<h2>Signup Here</h2>
<div class="fname">
<label>First Name</label>
<input type="text" id="fname">
</div>
<div class="lname">
<label>Last Name</label>
<input type="text" id="lname">
</div>
<div class="phone">
<label>Phone No.</label>
<input type="tel" id="phone">
</div>
<div class="massage">
<label>Massage</label>
<textarea id="msg"></textarea>
</div>
<input type="submit" value="Signup" id="sbtn">
</div>
<div class="formbox2">
<h2>Login Here</h2>
<div class="fname">
<label>First Name</label>
<input type="text" id="fname">
</div>
<div class="lname">
<label>Last Name</label>
<input type="text" id="lname">
</div>
<div class="phone">
<label>Phone No.</label>
<input type="tel" id="phone">
</div>
<input type="submit" value="Signup" id="lbtn">
<p id="txtmsg" style="display:none;">Login Successful</p>
</div>
</div>
</body>
</html>Use CSS code in css file for create signup login form
@charset "UTF-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Outfit", sans-serif;
}
body{
width: 100%;
height: 100vh;
background: blanchedalmond;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease;
}
.container{
width: 600px;
height: 300px;
/*border: 1px solid black;*/
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.image{
width: 50%;
height: calc(300px - 22px);
/*border: 1px solid black;*/
overflow: hidden;
z-index: 11;
background-image: url(img.jpg);
background-size: cover;
background-position: center;
border-radius: 10px;
transition: 0.5s ease;
}
/*.image img{
width: 100%;
height: 300px;
object-position: center;
object-fit: cover;
}*/
.formbox{
width: 50%;
height: calc(300px - 22px);
/*border: 1px solid black;*/
padding: 8px 15px;
}
.formbox2{
position: absolute;
top: calc(0 - 10px);
left: 10px;
width: 289px;
height: calc(300px - 22px);
/*border: 1px solid black;*/
padding: 8px 15px;
transform: translateY(300px);
transition: 0.7s ease;
}
.formbox h2{
text-align: center;
}
.formbox2 h2 {
text-align: center;
}
.fname, .lname, .phone, .massage{
width: 100%;
display: flex;
flex-direction: column;
}
#fname, #lname, #phone, #msg{
width: 100%;
height: 25px;
border: 1px solid red;
border-radius: 5px;
padding-left: 10px;
}
.formbox2 #fname, .formbox2 #lname, .formbox2 #phone{
border: 1px solid yellow;
padding-left: 10px;
}
#sbtn{
width: 100px;
height: 30px;
background: red;
border: none;
text-align: center;
margin-top: 7px;
border-radius: 5px;
color: white;
}
#lbtn{
width: 100px;
height: 30px;
background: yellow;
border: none;
text-align: center;
margin-top: 7px;
border-radius: 5px;
}Use Javascript code in js file for create function in signup login form
var signbtn = document.getElementById("sbtn");
var msg = document.getElementById("txtmsg");
var loginbtn = document.getElementById("lbtn");
var img = document.querySelector(".image");
var login = document.querySelector(".formbox2");
var imgchange = document.querySelector(".image");
var body = document.getElementById("bg");
signbtn.onclick = function()
{
body.style.background = "darkorange";
imgchange.style.background = "url(img1.jpg)";
imgchange.style.backgroundSize = "cover";
imgchange.style.backgroundPosition = "center";
img.style.transform = "translateX(100%)";
login.style.transform = "translateY(0px)";
}
loginbtn.onclick = function()
{
msg.style.display = "block";
}