Captcha Generator using HTML CSS and JavaScript
Last Updated :
04 Jun, 2025
Improve
A captcha is a way of verifying whether a user is human or not. A captcha is made up with the help of combining letters and digits. It ensures that the user attempting to access the platform is a human. So, without wasting time, let's get started.
Application of Captcha
- Form Authentication: For login and sign up, it can be used to ensure that an end user is human.
- Preventing Fake Registrations: With the captcha, we can prevent bots from creating an account on a system.
- Preventing Fake comments: This way bot would not be able to comment on a system,
- NetBanking and financial institutions: To ensure that Authentication is only done by humans, and in this way, manipulation of transactions can be prevented.
Note: Captcha can protect From some Automated attacks as well.
Step-by-Step Guide to Creating a CAPTCHA Generator
- HTML Structure: Set up the HTML elements including an input field for the CAPTCHA code, a refresh icon for regenerating the CAPTCHA, a display area for the CAPTCHA, and a submit button for validation.
- CSS Styling: Apply styles to the CAPTCHA display area, input field, and submit button to control layout, appearance, and behavior (e.g., shadows, borders, font styles).
- CAPTCHA Generation: Implement a generate() function in JavaScript that creates a random 5-character CAPTCHA string from alphanumeric characters and displays it in the designated area when the page loads or when the refresh icon is clicked.
- CAPTCHA Validation: Implement a printmsg() function that compares the user-entered CAPTCHA code with the generated one, providing feedback ("Matched" or "not Matched") and regenerating the CAPTCHA after each attempt.
- User Interaction: Allow users to refresh the CAPTCHA and submit their input for validation, with immediate feedback displayed based on whether the input matches the generated CAPTCHA.cop
Example: The below code will generate a design for a captcha and from the CSS file we will add style and on the image(refresh) click, we will generate a new captcha by calling generate() method from JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="captcha.css">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity=
"sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
<script src="captcha.js"></script>
</head>
<body onload="generate()">
<div id="user-input" class="inline">
<input type="text"
id="submit"
placeholder="Captcha code" />
</div>
<div class="inline" onclick="generate()">
<i class="fas fa-sync"></i>
</div>
<div id="image"
class="inline"
selectable="False">
</div>
<input type="submit"
id="btn"
onclick="printmsg()" />
<p id="key"></p>
</body>
</html>
#image{
margin-top: 10px;
box-shadow: 5px 5px 5px 5px gray;
width: 60px;;
padding: 20px;
font-weight: 400;
padding-bottom: 0px;
height: 40px;
user-select: none;
text-decoration:line-through;
font-style: italic;
font-size: x-large;
border: red 2px solid;
margin-left: 10px;
}
#user-input{
box-shadow: 5px 5px 5px 5px gray;
width:auto;
margin-right: 10px;
padding: 10px;
padding-bottom: 0px;
height: 40px;
border: red 0px solid;
}
input{
border:1px black solid;
}
.inline{
display:inline-block;
}
#btn{
box-shadow: 5px 5px 5px grey;
color: aqua;
margin: 10px;
background-color: brown;
}
let captcha;
function generate() {
// Clear old input
document.getElementById("submit").value = "";
// Access the element to store
// the generated captcha
captcha = document.getElementById("image");
let uniquechar = "";
const randomchar =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Generate captcha for length of
// 5 with random character
for (let i = 1; i < 5; i++) {
uniquechar += randomchar.charAt(
Math.random() * randomchar.length)
}
// Store generated input
captcha.innerHTML = uniquechar;
}
function printmsg() {
const usr_input = document
.getElementById("submit").value;
// Check whether the input is equal
// to generated captcha or not
if (usr_input == captcha.innerHTML) {
let s = document.getElementById("key")
.innerHTML = "Matched";
generate();
}
else {
let s = document.getElementById("key")
.innerHTML = "not Matched";
generate();
}
}
Output:
