Skip to content
Related Articles
Open in App
Not now

Related Articles

Captcha Generator using HTML CSS and JavaScript

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 22 Dec, 2022
Improve Article
Save Article

A captcha is a way of identifying a user whether the user is human or not.  A captcha is made up with the help of combining letters and digits. it ensures that the user who is trying to access the platform is a human. So without wasting the time let’s get started.

Application of Captcha:

  • Form Authentication: For login and sign up it can be used to ensure that a end user is human.
  • Preventing Fake Registrations: With the captcha we can prevent bots from creating a account on a system.  
  • Preventing Fake comments:  This way bot would not be able to do Comment on a system,
  • NetBanking and financial institutes: To ensure that Authentication is only done by humans and this way manipulation of transactions can be prevented.

Note: Captcha can protect From some Automated attacks as well.

Example: First, create a section for Captcha with HTML. 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">
    <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=
    <script src="captcha.js"></script>
<body onload="generate()">
    <div id="user-input" class="inline">
        <input type="text" id="submit"
            placeholder="Captcha code" />
    <div class="inline" onclick="generate()">
        <i class="fas fa-sync"></i>
    <div id="image" class="inline" selectable="False">
    <input type="submit" id="btn" onclick="printmsg()" />
    <p id="key"></p>

captcha.css: For designing our captcha box and submit button.


    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;
    font-style: italic;
    font-size: x-large;
    border: red 2px solid;
    margin-left: 10px;
    box-shadow: 5px 5px 5px 5px gray;
       margin-right: 10px;
    padding: 10px;
    padding-bottom: 0px;
    height: 40px;
       border: red 0px solid;
    border:1px black solid;
    box-shadow: 5px 5px 5px grey;
    color: aqua;
    margin: 10px;
    background-color: brown;

captcha.js: This file will verify the entered captcha with generated captcha when the user clicks on submit button. And when the refresh icon is clicked it will re-generate the Captcha.


var captcha;
function generate() {
    // Clear old input
    document.getElementById("submit").value = "";
    // Access the element to store
    // the generated captcha
    captcha = document.getElementById("image");
    var uniquechar = "";
    const randomchar =
    // 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
    // Check whether the input is equal
    // to generated captcha or not
    if (usr_input == captcha.innerHTML) {
        var s = document.getElementById("key")
            .innerHTML = "Matched";
    else {
        var s = document.getElementById("key")
            .innerHTML = "not Matched";


Captcha Generator with SImple HTML,CSS and JS

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!