Login and Registration Form in HTML CSS & JavaScript

byCodingFlicks -September 16, 2021

0

Forms are one of the important elements of a website. It actually help a user to share his or her information with the system. We normally observe them on any website where we need to sign up, log in, book something and so on. A form act as a bridge between the platform and the user. In this blog post, you will learn how to create a login and Registration Form in HTML CSS & JavaScript. We have shared many snippets of CSS animation examples, HTML CSS, Bootstrap etc. on our website. Apart from this project, check them out too. We have shared a video tutorial based on this snippet below. We hope you will check it out before collecting the source code.

Video Tutorial:

We hope you have watched the above tutorial on form design using HTML, CSS, and JavaScript. A login form is an element on a webpage that is used to authenticate the identity of a particular user. On the other hand, a registration form is an element on a webpage where users enter their information into a list of fields to register for a company or service. Forms are used in different types of websites and apps, some of them are e-commerce sites, banking apps, government portals, educational platforms, healthcare websites, job portals, social media, SaaS dashboards, travel booking sites and customer service platforms. In a word, those website that heavily rely on user details, verification or transactions relies on forms.

You May Also Like:

Login and Registration Form Design [ Source Code ]:

To create this snippet, create an HTML file with the .html extension and a CSS file with the .css extension. Link the external CSS file to the HTML file. Also, add the latest jquery file to the HTML file. You can add a separate JS file for the JavaScript code that we used here. In this project, we added the code below the HTML code. Then copy the code below from the boxes below and paste them into your project. If you want, you can download the entire code by clicking the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en"> 
<!-- codinflicks.com -->
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Login and Registration Form in HTML CSS & JavaScript</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
	

<div class="container">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="panel panel-login">
					
					<div class="panel-heading">
						<div class="row">
							<div class="col-xs-6">
								<a class="active" href="#" id="login-part">Login</a>
							</div>
							<div class="col-xs-6">
								<a href="#" id="reg-part">Register</a>
							</div>
						</div>
					</div>

					<div class="panel-body">
						<div class="row">
							<div class="col-lg-12">
								<form action="" id="form-one" method="post" name="form-one" role="form" style="display: block;">
									<h2 class="text-center">Login Form</h2>
									<div class="form-group">
										<input class="form-control" id="username" name="username" placeholder="Enter Username" required="" type="text">
									</div>
									<div class="form-group">
										<input class="form-control" id="password" name="password" placeholder="Enter Password" required="" type="password">
									</div>
									<div class="form-group">
										<div class="row">
											<div class="col-sm-6 col-sm-offset-3">
												<input class="form-control btn btn1" type="submit" value="Log In">
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="row">
											<div class="col-lg-12">
												<div class="text-center">
													<a class="forgot-password" href="">Forgot Password?</a>
												</div>
											</div>
										</div>
									</div>
								</form>
								
								<form action="" id="form-two" method="post" name="form-two" role="form" style="display: none;">
									<h2 class="text-center">Signup Form</h2>
									<div class="form-group">
										<input class="form-control" id="email" name="email" placeholder="Enter Email Address" required="" type="email">
									</div>
									<div class="form-group">
										<input class="form-control" id="password" name="password" placeholder="Enter Password" required="" type="password">
									</div>
									<div class="form-group">
										<input class="form-control" id="confirm-password" name="confirm-password" placeholder="Confirm Password" required="" type="password">
									</div>
									<div class="form-group">
										<div class="row">
											<div class="col-sm-6 col-sm-offset-3">
												<input class="form-control btn btn2" type="submit" value="SignUp">
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>





	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script>
        $(function() {

    $('#login-part').click(function(e) {
		$("#form-one").delay(200).fadeIn(200);
 		$("#form-two").fadeOut(200);
		$('#reg-part').removeClass('active');
		$(this).addClass('active');
		e.preventDefault();
	});
	
	$('#reg-part').click(function(e) {
		$("#form-two").delay(200).fadeIn(200);
 		$("#form-one").fadeOut(200);
		$('#login-part').removeClass('active');
		$(this).addClass('active');
		e.preventDefault();
	});

});
    </script>
</body>
</html>

ADD CSS:

body {
	padding-top: 100px;
	font-family: 'Montserrat', sans-serif;
	background: linear-gradient(#22DAEA, #142CA7);
	height: 100vh;
}
h2 {
	margin: 30px 0;
	font-family: "Lora", serif;
	font-size: 30px;
	text-transform: uppercase;
	letter-spacing: 2px;
}
.panel-login {
	border: none;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
.panel-login>.panel-heading {
	color: #00415d;
	background: linear-gradient(#22DAEA, #142CA7);;
	border-color: #fff;
	text-align: center;
}
.panel-login>.panel-heading a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	transition: all 0.1s linear;
	text-transform: uppercase;
	font-weight: 100;
}
.panel-login>.panel-heading a.active {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}
.panel-login input[type="text"], 
.panel-login input[type="email"], 
.panel-login input[type="password"] {
	height: 45px;
	font-size: 16px;
	transition: all 0.5s linear;
}
.btn1, .btn2 {
	background-color: deepskyblue;
	outline: none;
	color: #fff;
	font-size: 25px;
	height: auto;
	padding: 12px 0;
	text-transform: uppercase;
	margin-top: 50px;
	border-radius: 50px;
	background: linear-gradient(#22DAEA, #142CA7);;
}

We hope you liked this project. If so, please share the articles on this blog. Please follow us in our social media profiles to stay connected with this blog. Thanks for visiting the blog.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.