This HTML code is a simple implementation of a CAPTCHA system using JavaScript to generate a random sequence of numbers and letters for the user to input. The CAPTCHA is refreshed upon user request and validated before allowing form submission.
<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>Overall, this code demonstrates a basic CAPTCHA implementation in HTML using JavaScript for form validation and random code generation. The CAPTCHA is refreshed on user request and must be correctly entered to submit the form.
