One of the most crucial pages on a website or app is the login page, which enables authorized users to access the full website or a specific section of it. The login/sign up page is always the first page that users see on login-protected websites. This article will provide you a source code on login page in html with google recapcha v2 for human/robot verification.
Benefit of Login Page in HTML
The login page is a staple of all secure applications and is frequently used online to verify user identity before displaying the secured sections of web apps. As an illustration, Facebook requires authentication before granting you access to their platform. A unique website page called Login Page is used for user authentication. You must first input your credentials into the Login screen, which the application will validate before presenting you with the secured portion of the application.
In this illustration, we’ll see how a login page is actually used in a web application or other kind of application. For instance, you must provide your username and password to log into the system if you must use the Windows or Linux operating system. In order to determine if you are an OS authorized user or not, the login page will verify your identity. If not, you won’t be able to access the operating system. A very old procedure that has been in use since operating systems were created is the security and authentication of any program. Linux is regarded as the most secure operating system and does a great job at managing security.
Login Page with HTML with Google Recaptcha Source Code
To get you google recapcha v2 site key, click this link and create one Google Recaptcha
<html>
<head>
<title></title>
</head>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
margin-top:20px;
background: #f6f9fc;
}
.account-block {
padding: 0;
background-image: url(https://bootdey.com/img/Content/bg1.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
position: relative;
}
.account-block .overlay {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.account-block .account-testimonial {
text-align: center;
color: #fff;
position: absolute;
margin: 0 auto;
padding: 0 1.75rem;
bottom: 3rem;
left: 0;
right: 0;
}
.text-theme {
color: #5369f8 !important;
}
.btn-theme {
background-color: #5369f8;
border-color: #5369f8;
color: #fff;
}
</style>
<body>
<div id="main-wrapper" class="container">
<div class="row justify-content-center">
<div class="col-xl-10">
<div class="card border-0">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-6">
<div class="p-5">
<div class="mb-5">
<h3 class="h4 font-weight-bold text-theme">Login</h3>
</div>
<h6 class="h5 mb-0">Welcome back!</h6>
<p class="text-muted mt-2 mb-5">Enter your email address and password to access admin panel.</p>
<p align="center" id="message-wrap" style="color:#F00; display:none"></p>
<form method="post" name="login" id="my-form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="cusername" />
</div>
<div class="form-group mb-5">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="cpassword" />
</div>
<div class="form-group mb-5">
<div id="google_recaptcha"></div>
</div>
<button type="submit" class="btn btn-theme">Login</button>
<a href="#l" class="forgot-link float-right text-primary">Forgot password?</a>
</form>
</div>
</div>
<div class="col-lg-6 d-none d-lg-inline-block">
<div class="account-block rounded-right">
<div class="overlay rounded-right"></div>
<div class="account-testimonial">
<h4 class="text-white mb-4">Theme From https://www.bootdey.com/</h4>
<p class="lead text-white">“Make it work, make it right, make it fast.” </p>
<p>– Kent Beck</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="text-muted text-center mt-3 mb-0">Don't have an account? <a href="register.html" class="text-primary ml-1">register</a></p>
</div>
</div>
</div>
<script>
var onloadCallback = function() {
grecaptcha.render('google_recaptcha', {
'sitekey' : '6Lei9aMlAxxxxxxxxxxxxxxxxxxxxxxxxxxxxxqM0Ii'
});
};
$(function () {
//Check if required fields are filled
//Form Submit Event
$("#my-form").submit(function () {
event.preventDefault();
cusername = $("#cusername").val();
cpassword = $("#cpassword").val();
if(cusername=="" || cpassword==""){
showHideMsg("Username or Password are empty","error");
}else{
var rcres = grecaptcha.getResponse();
if(rcres.length){
showHideMsg("Form Submitted","success");
}else{
showHideMsg("Please verify reCAPTCHA","error");
$('#login-button').prop('disabled', false);
$('#login-button').val('Login');
}
}
});
//Show/Hide Message
function showHideMsg(message,type){
if(type == "success"){
$("#message-wrap").addClass("success-msg").removeClass("error-msg");
}else if(type == "error"){
$("#message-wrap").removeClass("success-msg").addClass("error-msg");
}
$("#message-wrap").stop()
.slideDown()
.html(message)
.delay(2000)
.slideUp();
}
//Google Style InputFields
$(".field-wrapper .field-placeholder").on("click", function () {
$(this).closest(".field-wrapper").find("input").focus();
});
$(".field-wrapper input").on("keyup", function () {
var value = $.trim($(this).val());
if (value) {
$(this).closest(".field-wrapper").addClass("hasValue");
} else {
$(this).closest(".field-wrapper").removeClass("hasValue");
}
});
});
</script>
</body>
</html>
This code include a Qjuery for field validation.
