Free captcha generator website source code using html css and javascript

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is an essential tool for securing websites from bots and spam. Whether it’s to protect a login page or ensure human input on a form, CAPTCHA has become a necessity in modern web development.

This article provides a detailed guide to building a free CAPTCHA generator website using HTML, CSS, and JavaScript, complete with source code. The guide is designed for both beginners and experienced developers who want to enhance their website security while learning practical coding techniques.

See the Pen Simple CAPTCHA Generator by Ajay Bagde (@Ajay-Bagde) on CodePen.

Table of Contents

What Is a CAPTCHA?

A CAPTCHA is a challenge-response test used to verify that a user is human. It typically requires users to:

Recognize distorted text.
Identify images based on a prompt.
Solve a simple arithmetic question.

CAPTCHAs prevent bots from performing automated tasks such as:

Spamming forms.
Creating fake accounts.
Initiating brute force attacks.

Benefits of Building Your CAPTCHA System

Customizability
Tailor the CAPTCHA design and behavior to suit your website’s theme and needs.
Cost-Effective
Save on third-party service costs by creating your solution.
Learning Opportunity
Enhance your skills in JavaScript and web development by implementing a fully functional CAPTCHA system.

Tools and Technologies Required

HTML: For structuring the CAPTCHA and form.
CSS: For styling the CAPTCHA and ensuring it blends with your website’s design.
JavaScript: For generating random CAPTCHA challenges and validating user input.

Features of the CAPTCHA Generator

Random text-based CAPTCHA generation.
CAPTCHA refresh option for generating a new challenge.
Validation to ensure user input matches the CAPTCHA.
Simple and lightweight design for seamless integration into any website.

Complete Source Code for a CAPTCHA Generator

HTML Code (index.html)

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free CAPTCHA generator website source code using HTML, CSS, and JavaScript">
  <title>CAPTCHA Generator</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Simple CAPTCHA Generator</h1>
    <div class="captcha-container">
      <div id="captcha-box"></div>
      <button id="refresh-btn">Refresh CAPTCHA</button>
    </div>
    <form id="captcha-form">
      <input type="text" id="captcha-input" placeholder="Enter CAPTCHA" required>
      <button type="submit">Submit</button>
    </form>
    <p id="message"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Code (styles.css)

cssCopy codebody {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.captcha-container {
  margin-bottom: 15px;
}

#captcha-box {
  background: #e0e0e0;
  padding: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background: #0056b3;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

#message {
  margin-top: 15px;
  font-weight: bold;
}

JavaScript Code (script.js)

javascriptCopy codeconst captchaBox = document.getElementById('captcha-box');
const refreshBtn = document.getElementById('refresh-btn');
const captchaInput = document.getElementById('captcha-input');
const captchaForm = document.getElementById('captcha-form');
const message = document.getElementById('message');

// Generate a random CAPTCHA
function generateCaptcha() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let captcha = '';
  for (let i = 0; i < 6; i++) {
    captcha += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  captchaBox.textContent = captcha;
}

// Validate the CAPTCHA
function validateCaptcha(event) {
  event.preventDefault();
  const userInput = captchaInput.value.trim();
  if (userInput === captchaBox.textContent) {
    message.textContent = 'CAPTCHA Verified!';
    message.style.color = 'green';
  } else {
    message.textContent = 'Incorrect CAPTCHA. Please try again.';
    message.style.color = 'red';
  }
}

// Event Listeners
refreshBtn.addEventListener('click', generateCaptcha);
captchaForm.addEventListener('submit', validateCaptcha);

// Initialize CAPTCHA
generateCaptcha();

How the CAPTCHA Generator Works

CAPTCHA Generation
The generateCaptcha function creates a random 6-character string consisting of letters and numbers.
Refresh Option
Clicking the “Refresh CAPTCHA” button regenerates a new CAPTCHA.
Validation
The user’s input is compared to the CAPTCHA string. A success or error message is displayed based on the result.

Enhancements and Advanced Features

Adding Image-Based CAPTCHA
Use libraries like Canvas to create distorted text for an image-based CAPTCHA.
Audio CAPTCHA
Implement an audio CAPTCHA for accessibility.
Backend Validation
Integrate server-side validation using languages like Python, PHP, or Node.js.
Multi-Language Support
Allow users to generate CAPTCHAs in different languages.

FAQs

Q1: Can I use this CAPTCHA system for commercial websites?

Yes, the provided source code is free to use and can be customized for commercial applications.

Q2: How can I add server-side validation?

Use a backend language like Python or PHP to validate the CAPTCHA input securely on the server.

Q3: Is this CAPTCHA secure against bots?

This CAPTCHA is sufficient for basic protection. For advanced security, consider integrating more complex CAPTCHAs or external APIs.

Q4: Can I use this code in frameworks like React or Angular?

Yes, the logic can be adapted to work with modern frameworks.

Conclusion

Creating a free CAPTCHA generator website using HTML, CSS, and JavaScript is an excellent project for improving your web development skills. The provided source code serves as a robust starting point, and with additional features, you can make it even more powerful.

Also Read

Sparse matrix optimization AI