Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to Make Login Form with Captcha in HTML, CSS & JavaScript
    JavaScript

    How to Make Login Form with Captcha in HTML, CSS & JavaScript

    Coding StellaBy Coding Stella11 January 2024Updated:12 January 2024No Comments5 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Hello everyone! In today’s blog post, we’re going to talk about creating a user-friendly login form with a Captcha using HTML, CSS, and JavaScript. It’s going to be a simple and enjoyable read, suitable for both coding pros and those who are just starting out.

    In this post, we won’t just be discussing login forms; we’re adding a Captcha for an extra layer of security. Whether you’re a coding enthusiast or a newbie, this is a chance to learn how to make your web applications look good and stay secure.

    Why a login form with Captcha, you ask? Well, login forms are like the entry point to your website, and a Captcha helps keep unwanted bots away.

    So, join me in today’s blog post where we’ll explore the world of simple and secure login forms with Captcha. We’ll create something that not only looks good but is also reliable. Ready to read along? Let’s dive into our uncomplicated Login Form with Captcha blog post – the HTML, CSS, and JavaScript way!

    HTML :

    The provided code is an HTML login form with a captcha feature. It includes fields for username and password input, as well as a captcha input field. The captcha is a security measure to ensure that the user is a human and not a bot. It generates a random text that the user needs to enter correctly. The form also has a login button. The code includes external CSS and JavaScript files for styling and functionality.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Login Form with Captcha | CodingStella</title>
      <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@800&amp;display=swap'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <div class="login-form">
      <div class="form-title">
        Login form
      </div>
      <div class="form-input">
        <label for="username">Username</label>
        <input type="text" id="username">
      </div>
      <div class="form-input">
        <label for="password">Password</label>
        <input type="password" id="password">
      </div>
      <div class="captcha">
        <label for="captcha-input">Enter Captcha</label>
        <div class="preview"></div>
        <div class="captcha-form">
          <input type="text" id="captcha-form" placeholder="Enter captcha text">
          <button class="captcha-refresh">
            <i class="fa fa-refresh"></i>
          </button>
        </div>
      </div>
      <div class="form-input">
        <button id="login-btn">Login</button>
      </div>
    </div>
    <!-- partial -->
      <script src='https://unpkg.com/sweetalert/dist/sweetalert.min.js'></script><script  src="./script.js"></script>
    
    </body>
    </html>
    

    CSS :

    The provided CSS code is for styling the login form. It sets the font family to “Roboto” and applies a linear gradient background. The form is positioned in the center of the page using absolute positioning and transformed to be centered. The form has a dark background with padding and a box shadow. The labels and input fields are styled with appropriate margins, colors, and borders. The captcha section includes a preview area and an input field with a refresh button. The login button is styled with a blue background and white text.

    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
    }
    body {
      font-family: "Roboto", sans-serif;
      min-height: 100vh;
      background: linear-gradient(180deg, #fff 50%, #bd002f 50%);
    }
    .login-form {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 450px;
      background: #222;
      padding: 20px 30px;
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    }
    .login-form .form-title {
      font-family: "Montserrat", sans-serif;
      text-align: center;
      font-size: 30px;
      font-weight: 600;
      margin: 20px 0px 30px;
      color: #fff;
    }
    .login-form .form-input {
      margin: 10px 0px;
    }
    .login-form .form-input label,
    .login-form .captcha label {
      display: block;
      font-size: 15px;
      color: #fff;
      margin-bottom: 5px;
    }
    .login-form .form-input input {
      width: 100%;
      padding: 10px;
      border: 1px solid #888;
      font-size: 15px;
    }
    .login-form .captcha {
      margin: 15px 0px;
    }
    .login-form .captcha .preview {
      color: #fff;
      width: 100%;
      text-align: center;
      height: 40px;
      line-height: 40px;
      letter-spacing: 8px;
      border: 1px dashed #bdbdbd;
      font-family: "monospace";
    }
    .login-form .captcha .preview span {
      display: inline-block;
      user-select: none;
    }
    .login-form .captcha .captcha-form {
      display: flex;
    }
    .login-form .captcha .captcha-form input {
      width: 100%;
      padding: 8px;
      border: 1px solid #888;
    }
    .login-form .captcha .captcha-form .captcha-refresh {
      width: 40px;
      border: none;
      outline: none;
      background: #888;
      color: #eee;
      cursor: pointer;
    }
    .login-form #login-btn {
      margin-top: 5px;
      width: 100%;
      padding: 10px;
      border: none;
      outline: none;
      font-size: 15px;
      text-transform: uppercase;
      background: #4c81ff;
      color: #fff;
      cursor: pointer;
    }
    

    JavaScript:

    The provided JavaScript code is responsible for generating and validating the captcha in the login form. Here’s a breakdown of how it works:

    1. The code defines an array of font styles and initializes a variable captchaValue to store the generated captcha value.
    2. The generateCaptcha() function generates a random value, converts it to base64, and truncates it to a length between 5 and 10 characters. The resulting value is stored in captchaValue.
    3. The setCaptcha() function creates HTML elements for each character in captchaValue. Each character is wrapped in a <span> element with a randomly rotated style and a randomly selected font from the fonts array. The resulting HTML is inserted into the preview area of the captcha.
    (function () {
      const fonts = ["cursive", "sans-serif", "serif", "monospace"];
      let captchaValue = "";
      function generateCaptcha() {
        let value = btoa(Math.random() * 1000000000);
        value = value.substr(0, 5 + Math.random() * 5);
        captchaValue = value;
      }
      function setCaptcha() {
        let html = captchaValue
          .split("")
          .map((char) => {
            const rotate = -20 + Math.trunc(Math.random() * 30);
            const font = Math.trunc(Math.random() * fonts.length);
            return `<span 
            style="
              transform:rotate(${rotate}deg);
              font-family:${fonts[font]}
            "
          >${char}</span>`;
          })
          .join("");
        document.querySelector(".login-form .captcha .preview").innerHTML = html;
      }
      function initCaptcha() {
        document
          .querySelector(".login-form .captcha .captcha-refresh")
          .addEventListener("click", function () {
            generateCaptcha();
            setCaptcha();
          });
        generateCaptcha();
        setCaptcha();
      }
      initCaptcha();
    
      document
        .querySelector(".login-form #login-btn")
        .addEventListener("click", function () {
          let inputCaptchaValue = document.querySelector(
            ".login-form .captcha input"
          ).value;
          if (inputCaptchaValue === captchaValue) {
            swal("", "Logging In!", "success");
          } else {
            swal("Invalid captcha");
          }
        });
    })();

    Congratulations, coders! We’ve just wrapped up our login form with Captcha using HTML, CSS, and JavaScript. You’ve built a secure and user-friendly login experience, combining structure, style, and extra security. Take a moment to appreciate your coding skills. Feel free to customize your form, and remember: keep exploring, keep coding, and have fun with your creations!

    If you face any issues with your project, don’t worry! Just click the Download button to get the source code and start coding without any hassle. Enjoy your coding experience!

    Captcha login form login form
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Modern Login Form using HTML & CSS | Glassmorphism
    Next Article How to make a Sticky Navigation Bar using HTML, CSS, And JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025
    JavaScript

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025
    JavaScript

    How to create Cross Road Game using HTML CSS and JS

    2 May 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202419K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202416K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202414K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Heart Rate Animation Part 2 using HTML & CSS

    6 May 2024

    How to make Dots Ring Loader using HTML CSS

    16 April 2024

    Best Programming Languages for Web Development

    25 January 2024

    How to create Cool Responsive Card Slider using HTML CSS & JavaScript

    17 January 2025
    Latest Post

    How to make Happy birthday cake Animation using HTML & CSS

    29 May 2025

    How to create Toast Catcher Game using HTML CSS and JS

    26 May 2025

    How to create Animated No Chill Login form using HTML CSS and JS

    22 May 2025

    How to make Social media icons hover effect using HTML & CSS

    14 May 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood