3.5K
Signup and login form using HTML, CSS, jQuery
Hello friends, welcome to you in techmidpoint tutorial. In this tutorial, you are going to learn how to make the signup and login form using HTML, CSS, jQuery. I am trying to show you how we can make a signup and sign in the form together. If we design such a form users can easily engage in our site.
HTML and jQuery
<!DOCTYPE html>
<html>
<head>
<title>Signup and Signin form</title>
<link rel=" stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<div class="form-wrap">
<div class="tabs">
<h3 class="signup-tab"><a class="active" href="#signup-tab-content">Sign Up</a></h3>
<h3 class="login-tab"><a href="#login-tab-content">Log In</a></h3>
</div>
<div class="tabs-content">
<div id="signup-tab-content" class="active">
<form class="signup-form" action="" method="post">
<input type="email" class="input" id="user_email" autocomplete="off" placeholder="Email">
<input type="text" class="input" id="user_name" autocomplete="off" placeholder="Username">
<input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password">
<input type="password" class="input" id="user_re_pass" autocomplete="off" placeholder="Retype Password">
<input type="submit" class="button" value="Sign Up">
</form><!--.login-form-->
<div class="help-text">
<p>By signing up, you agree to our</p>
<p><a href="#">Terms of service</a></p>
</div>
</div>
<div id="login-tab-content">
<form class="login-form" action="" method="post">
<input type="text" class="input" id="user_login" autocomplete="off" placeholder="Email or Username">
<input type="password" class="input" id="user_pass" autocomplete="off" placeholder="Password">
<input type="checkbox" class="checkbox" id="remember_me">
<label for="remember_me">Remember me</label>
<input type="submit" class="button" value="Login">
</form><!--.login-form-->
<div class="help-text">
<p><a href="#">Forget your password?</a></p>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
tab = $('.tabs h3 a');
tab.on('click', function(event) {
event.preventDefault();
tab.removeClass('active');
$(this).addClass('active');
tab_content = $(this).attr('href');
$('div[id$="tab-content"]').removeClass('active');
$(tab_content).addClass('active');
});
});
</script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #4FDA8C;
}
body {
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
color: #666;
background: #262626;
font-family:Arial;
}
.form-wrap {
background: #fff;
width: 340px;
}
.form-wrap .tabs {
overflow: hidden;
}
.form-wrap .tabs h3 {
float: left;
width: 50%;
}
.form-wrap .tabs h3 a {
padding: 0.5em 0;
text-align: center;
font-size:20px;
font-weight: bold;
background-color: #28A55F;
display: block;
color: #000;
}
.form-wrap .tabs h3 a.active {
background-color: #fff;
}
.form-wrap .tabs-content {
padding: 1.5em;
}
.form-wrap .tabs-content div[id$="tab-content"] {
display: none;
}
.form-wrap .tabs-content .active {
display: block !important;
}
.form-wrap form .input {
color: inherit;
font-family: inherit;
padding: .8em 0 10px .8em;
border: 1px solid #CFCFCF;
outline: 0;
display: inline-block;
margin: 0 0 .8em 0;
padding-right: 2em;
width: 100%;
font-size: 16px;
}
.form-wrap form .button {
width: 100%;
padding: .8em 0 10px .8em;
background-color: #28A55F;
border: none;
color: #fff;
cursor: pointer;
text-transform: uppercase;
font-size: 20px;
font-weight: bold;
}
.form-wrap form .button:hover {
background-color: #4FDA8C;
}
.form-wrap form .checkbox {
visibility: hidden;
padding: 20px;
margin: .5em 0 1.5em;
}
.form-wrap form .checkbox:checked + label:after {
filter: alpha(opacity=100);
opacity: 1;
}
.form-wrap form label[for] {
position: relative;
padding-left: 20px;
cursor: pointer;
}
.form-wrap form label[for]:before {
content: '';
position: absolute;
border: 1px solid #CFCFCF;
width: 17px;
height: 17px;
top: 0px;
left: -14px;
}
.form-wrap form label[for]:after {
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background-color: transparent;
top: 4px;
left: -10px;
border: 3px solid #28A55F;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.form-wrap .help-text {
margin-top: .6em;
}
.form-wrap .help-text p {
text-align: center;
font-size: 14px;
}
For More Tutorials Please Click Here
