title: How to create Custom Captcha in HTML and PHP
body: <p>Every time in form submission and to stop spam data entry, we use captcha for stop spam enteries. There are lot of captcha available but I am try to create my own captcha with custom code with html and jquery.</p>
  
  <pre><code>jQuery( document ).ready(function() {
      refresh_captcha();
  });
  // Captcha Script
  
  function checkform(theform){
      var why = "";
  
      if(theform.CaptchaInput.value == ""){
          why += "- Please Enter CAPTCHA Code.\n";
      }
      if(theform.CaptchaInput.value != ""){
          if(ValidCaptcha(theform.CaptchaInput.value) == false){
              why += "- The CAPTCHA Code Does Not Match.\n";
          }
      }
      if(why != ""){
          alert(why);
          refresh_captcha();
          return false;
      }
  }
  
  function refresh_captcha(){
      var a = Math.ceil(Math.random() * 9)+ '';
      var b = Math.ceil(Math.random() * 9)+ '';
      var c = Math.ceil(Math.random() * 9)+ '';
      var d = Math.ceil(Math.random() * 9)+ '';
      var e = Math.ceil(Math.random() * 9)+ '';
      var f = Math.ceil(Math.random() * 9)+ '';
      var g = Math.ceil(Math.random() * 9)+ '';
  
      var code = a + b + c + d + e + f + g;
      jQuery("#CaptchaDiv").html(code);
      jQuery("#txtCaptcha").val(code);
      //document.getElementById("txtCaptcha").value = code;
      //document.getElementById("CaptchaDiv").innerHTML = code;
  }
  
  // Validate input against the generated number
  function ValidCaptcha(){
      var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
      var str2 = removeSpaces(document.getElementById('CaptchaInput').value);
      if (str1 == str2){
          alert("Congratulation, Captcha Successfully Match.");
          return true;
      }else{
          return false;
      }
  }
  
  // Remove the spaces from the entered and generated code
  function removeSpaces(string){
      return string.split(' ').join('');
  }
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code> .capbox {
           background-color: #92D433;
           border: #B3E272 0px solid;
           border-width: 0px 12px 0px 0px;
           display: inline-block;
           *display: inline; zoom: 1; /* FOR IE7-8 */
           padding: 8px 40px 8px 8px;
           }
           .capbox-inner {
           font: bold 11px arial, sans-serif;
           color: #000000;
           background-color: #DBF3BA;
           margin: 5px auto 0px auto;
           padding: 3px;
           -moz-border-radius: 4px;
           -webkit-border-radius: 4px;
           border-radius: 4px;
           }
           #CaptchaDiv {
           font: bold 17px verdana, arial, sans-serif;
           font-style: italic;
           color: #000000;
           background-color: #FFFFFF;
           padding: 4px;
           -moz-border-radius: 4px;
           -webkit-border-radius: 4px;
           border-radius: 4px;
           }
           #CaptchaInput { margin: 1px 0px 1px 0px; width: 135px; }
           button.refresh_captcha {
              padding: 0;
              border: none;
              background: transparent;
              /* width: 20px; */
              cursor: pointer;
          }
          button.refresh_captcha img {
              width: 30px;
              height: 30px;
          }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form method="post" action="http://astro-global.blogspot.in/" onsubmit="return checkform(this);"&gt;
           &lt;!-- START CAPTCHA --&gt;
           &lt;br&gt;
           &lt;div class="capbox"&gt;
              &lt;div id="CaptchaDiv"&gt;&lt;/div&gt;
              &lt;div class="capbox-inner"&gt;
                 Type the above number:&lt;br&gt;
                 &lt;input type="hidden" id="txtCaptcha"&gt;
                 &lt;input type="text" name="CaptchaInput" id="CaptchaInput" size="15"&gt;&lt;br&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;br&gt;&lt;br&gt;
           &lt;!-- END CAPTCHA --&gt;
           &lt;button type="button" class="refresh_captcha" onclick="refresh_captcha();" title="Refresh Captcha Code"&gt;&lt;img src="https://cdn3.iconfinder.com/data/icons/faticons/32/sync-01-128.png"&gt;&lt;/button&gt;
           &lt;input type="submit" value="Test Captcha"&gt;
        &lt;/form&gt;
  </code></pre>
  
  
  
  <p>Here is the full code to create and use custom captcha in form submission. This code is very easy to point out every step.</p>