Captcha coding in html

Welcome to GKhindi.co.in
Captcha Coding करना बहुत ही आसान है। जैसे की आप सभी जानते ही है कि Captcha का इस्तेमाल fraud (धोखा) से बचने के लिए किया जाता है। ताकि ये पता चल सके  कि जो computer उपयोग कर रहा है वो मानव है या नहीं।

तो चलिए Captcha की coding शुरू करें।  

<html>
<head>
 <title>captcha</title>
</head>
<body onload="createCaptcha()">
 <form onsubmit="validateCaptcha()">
  <div id="captcha"></div>
<input id="captchaTextBox" name="" placeholder="Captcha" type="text" />
 <button style="width: 100px;" type="submit">Submit</button>
 </form>
</body>
<script type="text/javascript">
 var code;
 function createCaptcha(){
  //clear the contents of captcha div first
  document.getElementById('captcha').innerHTML = "";
  var charsArray = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@#$%&*+-";
  var lengthOtp = 9;
  var captcha = [];
  for (var i = 0; i < lengthOtp; i++){
   //below code will not allow Repetition of Characters
   var index = Math.floor(Math.random() * charsArray.length + 1);
   if(captcha.indexOf(charsArray[index]) == -1)
    captcha.push(charsArray[index]);
   else i--;

  }
  var canv = document.createElement("canvas");
  canv.id = "captcha";
  canv.width=200;
canv.height=40;
  var ctx = canv.getContext("2d");
  ctx.font = "25px Georgia";
  ctx.strokeText(captcha.join(""), 0, 30);
  code = captcha.join("");
  document.getElementById("captcha").appendChild(canv);

 }
 function validateCaptcha(){
  event.preventDefault();
  debugger
  if(document.getElementById("captchaTextBox").value == code){
   window.location = "https://gkinhindibih.blogspot.com/";
  }
  else{
   alert("Invalid Captcha. Please try Again");
   createCaptcha();
  }
 }
</script>
</html>
captcha
Output

HTML Learning

HTML Learning