Captcha Generator using HTML CSS and JavaScript

Last Updated : 28 Aug, 2024

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

Approach

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.

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>

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

JavaScript

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:

How to create RGB color generator using HTML CSS and JavaScript ?

jeetpurohit989

Improve

Article Tags :

Captcha Generator using HTML CSS and JavaScript

Application of Captcha

Approach

Similar Reads