Captcha Generator using HTML CSS and JavaScript

Last Updated : 23 Jul, 2025

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.

index.html

<!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>

style.css

#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;
}

script.js

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();
    }
}