Captcha Generator using HTML CSS and JavaScript Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 CaptchaForm 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 GeneratorHTML 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.copExample: 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(); } } Output:Captcha Generator Captcha Generator using HTML CSS and JavaScript Comment More infoAdvertise with us Next Article Interview Preparation For Software Developers J jeetpurohit989 Follow Improve Article Tags : JavaScript Web Technologies TrueGeek-2021 JavaScript-Projects Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like