This content originally appeared on DEV Community and was authored by Muhammad Rauf
Hello friends, today we are going to learn How to Create a Responsive Login and Registration Form Template in HTML and CSS. There are a lot of Forms Design that I have created before but, to date, I have not created login and registration forms together or on one page.
What is the Login and Registration Form
Login Form means the login page or section where users need to enter their login details like email, phone number, and password. Registration form is the process to register user details to make login details for entry in the particular page or website.
In the login form section, we can make two input fields one is for the user email address or phone number and another for password and this is mandatory and in the registration form we have to add some extra input fields like the input field of name, phone number, password and other.
Let's have a look at the image of the Login and Registration Form Template. There you can see only Login Form but when you click on the Login now the right side login form smoothly flips then the Login form appears and Signup Form Hides.
I have made this Responsive Login and Registration Form in HTML,CSS and a bit JS. I hope that you can easily understand all the HTML CSS code that I have used to make this Form.
Let's get started:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<body translate="no">
<div class="form">
<ul class="soft-codeon">
<li class="tab active"><a href="#signup">Sign Up</a></li>
<li class="tab"><a href="#login">Log In</a></li>
</ul>
<div class="soft-codeon-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<p class="forgot"><a href="#">Forgot Password?</a></p>
<button class="button button-block" />Log In</button>
</form>
</div>
</div>
</div>
</body>
</html>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body ,html {
background:#f9d30d;
font-family: 'Titillium Web', sans-serif;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0 ;
}
a {
text-decoration: none;
color: #1ab188;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%); padding: 40px;
max-width: 600px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
.soft-codeon {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.soft-codeon:after {
content: "";
display: table;
clear: both;
}
.soft-codeon li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
-webkit-transition: 1.5s ease;
transition: .5s ease;
}
.soft-codeon li a:hover {
background: #dfdfds;
color: #ffffff;
}
.soft-codeon .active a {
background: #000;
color: #ffffff;
}
.soft-codeon-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff;
font-weight: 300;
margin: 0 0 40px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input, textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 40px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border-radius: 20px;
padding: 15px 0;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background-color: #6b0f1a;
color: #ffffff;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-appearance: none;
cursor:pointer;
}
.button:hover, .button:focus {
background-color: #6b0f1a;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
</style>
JavaScript Code:
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else
if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.soft-codeon-content > div').not(target).hide();
$(target).fadeIn(600);
});
//# sourceURL=pen.js
</script>
For taking the source code of this Login and Registration Form Template first, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the above source code. You can also directly see the demo and source codes of this Login and Registration Form by clicking on the Demo also you can read original post Create a Responsive Login and signup form. If you feel any difficulty or problem don't hesitate to discuss blow.
This content originally appeared on DEV Community and was authored by Muhammad Rauf
Muhammad Rauf | Sciencx (2021-11-22T16:04:40+00:00) Create A Responsive Login And Signup Form. Retrieved from https://www.scien.cx/2021/11/22/create-a-responsive-login-and-signup-form/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.