Hello everyone! In today’s blog post, we’re going to talk about creating a user-friendly login form with a Captcha using HTML, CSS, and JavaScript. It’s going to be a simple and enjoyable read, suitable for both coding pros and those who are just starting out.
In this post, we won’t just be discussing login forms; we’re adding a Captcha for an extra layer of security. Whether you’re a coding enthusiast or a newbie, this is a chance to learn how to make your web applications look good and stay secure.
Why a login form with Captcha, you ask? Well, login forms are like the entry point to your website, and a Captcha helps keep unwanted bots away.
So, join me in today’s blog post where we’ll explore the world of simple and secure login forms with Captcha. We’ll create something that not only looks good but is also reliable. Ready to read along? Let’s dive into our uncomplicated Login Form with Captcha blog post – the HTML, CSS, and JavaScript way!
HTML :
The provided code is an HTML login form with a captcha feature. It includes fields for username and password input, as well as a captcha input field. The captcha is a security measure to ensure that the user is a human and not a bot. It generates a random text that the user needs to enter correctly. The form also has a login button. The code includes external CSS and JavaScript files for styling and functionality.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login Form with Captcha | CodingStella</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login-form">
<div class="form-title">
Login form
</div>
<div class="form-input">
<label for="username">Username</label>
<input type="text" id="username">
</div>
<div class="form-input">
<label for="password">Password</label>
<input type="password" id="password">
</div>
<div class="captcha">
<label for="captcha-input">Enter Captcha</label>
<div class="preview"></div>
<div class="captcha-form">
<input type="text" id="captcha-form" placeholder="Enter captcha text">
<button class="captcha-refresh">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<div class="form-input">
<button id="login-btn">Login</button>
</div>
</div>
<!-- partial -->
<script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script><script src="./script.js"></script>
</body>
</html>
CSS :
The provided CSS code is for styling the login form. It sets the font family to “Roboto” and applies a linear gradient background. The form is positioned in the center of the page using absolute positioning and transformed to be centered. The form has a dark background with padding and a box shadow. The labels and input fields are styled with appropriate margins, colors, and borders. The captcha section includes a preview area and an input field with a refresh button. The login button is styled with a blue background and white text.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
min-height: 100vh;
background: linear-gradient(180deg, #fff 50%, #bd002f 50%);
}
.login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 450px;
background: #222;
padding: 20px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.login-form .form-title {
font-family: "Montserrat", sans-serif;
text-align: center;
font-size: 30px;
font-weight: 600;
margin: 20px 0px 30px;
color: #fff;
}
.login-form .form-input {
margin: 10px 0px;
}
.login-form .form-input label,
.login-form .captcha label {
display: block;
font-size: 15px;
color: #fff;
margin-bottom: 5px;
}
.login-form .form-input input {
width: 100%;
padding: 10px;
border: 1px solid #888;
font-size: 15px;
}
.login-form .captcha {
margin: 15px 0px;
}
.login-form .captcha .preview {
color: #fff;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
letter-spacing: 8px;
border: 1px dashed #bdbdbd;
font-family: "monospace";
}
.login-form .captcha .preview span {
display: inline-block;
user-select: none;
}
.login-form .captcha .captcha-form {
display: flex;
}
.login-form .captcha .captcha-form input {
width: 100%;
padding: 8px;
border: 1px solid #888;
}
.login-form .captcha .captcha-form .captcha-refresh {
width: 40px;
border: none;
outline: none;
background: #888;
color: #eee;
cursor: pointer;
}
.login-form #login-btn {
margin-top: 5px;
width: 100%;
padding: 10px;
border: none;
outline: none;
font-size: 15px;
text-transform: uppercase;
background: #4c81ff;
color: #fff;
cursor: pointer;
}
JavaScript:
The provided JavaScript code is responsible for generating and validating the captcha in the login form. Here’s a breakdown of how it works:
- The code defines an array of font styles and initializes a variable
captchaValueto store the generated captcha value. - The
generateCaptcha()function generates a random value, converts it to base64, and truncates it to a length between 5 and 10 characters. The resulting value is stored incaptchaValue. - The
setCaptcha()function creates HTML elements for each character incaptchaValue. Each character is wrapped in a<span>element with a randomly rotated style and a randomly selected font from thefontsarray. The resulting HTML is inserted into the preview area of the captcha.
(function () {
const fonts = ["cursive", "sans-serif", "serif", "monospace"];
let captchaValue = "";
function generateCaptcha() {
let value = btoa(Math.random() * 1000000000);
value = value.substr(0, 5 + Math.random() * 5);
captchaValue = value;
}
function setCaptcha() {
let html = captchaValue
.split("")
.map((char) => {
const rotate = -20 + Math.trunc(Math.random() * 30);
const font = Math.trunc(Math.random() * fonts.length);
return `<span
style="
transform:rotate(${rotate}deg);
font-family:${fonts[font]}
"
>${char}</span>`;
})
.join("");
document.querySelector(".login-form .captcha .preview").innerHTML = html;
}
function initCaptcha() {
document
.querySelector(".login-form .captcha .captcha-refresh")
.addEventListener("click", function () {
generateCaptcha();
setCaptcha();
});
generateCaptcha();
setCaptcha();
}
initCaptcha();
document
.querySelector(".login-form #login-btn")
.addEventListener("click", function () {
let inputCaptchaValue = document.querySelector(
".login-form .captcha input"
).value;
if (inputCaptchaValue === captchaValue) {
swal("", "Logging In!", "success");
} else {
swal("Invalid captcha");
}
});
})();
Congratulations, coders! We’ve just wrapped up our login form with Captcha using HTML, CSS, and JavaScript. You’ve built a secure and user-friendly login experience, combining structure, style, and extra security. Take a moment to appreciate your coding skills. Feel free to customize your form, and remember: keep exploring, keep coding, and have fun with your creations!
If you face any issues with your project, don’t worry! Just click the Download button to get the source code and start coding without any hassle. Enjoy your coding experience!
