Html5 Form with Captcha


Html5 Form with Captcha:
<html>
<head>
<script type="text/javascript">
//Created / Generates the captcha function
 function DrawCaptcha()
  {
  var a = Math.ceil(Math.random() * 6)+ '';
  var b = Math.ceil(Math.random() * 6)+ '';
  var c = Math.ceil(Math.random() * 6)+ '';
  var d = Math.ceil(Math.random() * 6)+ '';
  var e = Math.ceil(Math.random() * 6)+ '';
  var f = Math.ceil(Math.random() * 6)+ '';
  var g = Math.ceil(Math.random() * 6)+ '';
  var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f ;
  document.getElementById("txtCaptcha").value = code
  }
</script>
 <script type="text/javascript">
// Remove the spaces from the entered and generated code
 function removeSpaces(string){
  return string.split(' ').join('');
 }
</script>
</head>
<body onload="DrawCaptcha();">
 <form name="value">
 Name <input type="text" required pattern="^[a-zA-Z0-9]{4,12}$" value="" /> 
 Email:<input type="text" required pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" value="" />   
 Phone:<input type="text" required pattern="^[0-9]{10,}$"  value="" /> 
 Comments:<textarea required pattern="^[a-zA-Z0-9]{15,}$"></textarea>   
 Enter Numbers As Shown:
<input type="text" id="txtCaptcha" style="background-image:url(images/cap.JPG); text-align:center; border:none; font-weight: bold; font-family:Modern" />
 <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" />
 <input type="text"  oninput="check(this)" required  id="txtInput"/>  <input type="submit" value="SEND" onclick="ValidCaptcha();" /> 
 </form>
<script>
// Validate the Entered input aganist the generated security code function
function check(input) {
  var cap =removeSpaces(document.getElementById('txtCaptcha').value);
if (input.value != cap ) {
  input.setCustomValidity("Error in code Please Check!");
  } else {
  // input is fine -- reset the error message
  input.setCustomValidity('');
  }
  }
 </script>
</body>
</html>

Demo:
(click to view image larger)

Captcha Demo

It is working or not Please Let me know..
Please Leave your Comment..

9 thoughts on “Html5 Form with Captcha

  1. The greatest method for golf that one could find out more about immediately.nikeナイキ Stop Whining And Start your very own golf Crusade In exchange nike ゴルフ Impartial write-up divulges Five innovative new things around golf that no one is discussing. ナイキ シューズ Almost any double twirl on golf ナイキ ウエア

    The Trick For golf nikeナイキ Totally new double strain on golf nike ゴルフ This is why individuals are extremely wrong on golf and as a consequence why you should ought to see this post. nike golf Independent publishing discloses Three fresh, new things over golf that absolutely no one is talking about.ナイキ ウエア Specifically how to discover all the stuff there is to know related to golf in nine easy ways.

    The ultimate fix for trf that you simply could educate yourself about immediately. TRF The Astonishing trf Hack Which May Fool Everyone TRF Effectual advise for trf that can be used beginning as we speak. レッグマジックX Whatever the industry professionals are generally not revealing around trf and how this affects you actually. エクササイズ

  2. Thank you! Thank you! I can’t say Thank you enough. I was having the hardest time finding a captcha code to integrate into my form. My only thing would be is there a way in the future for you to have a voice option for User Accessibility? That would make your captcha perfect!

  3. Hi Venugoapl this is working fine but please make a small change for the captcha as it can be changed by the user in the input text type is editable for captcha.

    make it ro read only then user can’t change like

    Thanks once again

  4. It’s 200% working & amazing,
    will u please send the code for Drop Down List(DDL) in which first DDL contains District list, Second DDL Contains State List according to first DDL and Third DDL Contains City list according to Second DDL………………Plz it’s urgent…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s