Hello Friends My Name Is Viraj,Today I Will Create Captcha Function On Your Web Page.
Here In This Html Tutorial We Will Create Captcha Function In Html/Javascript In Code.
Here Is An Example Related To Topic....
Step 1:
<html>
<head>
<script type="text/javascript">
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">
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>
function check(input) {
var cap =removeSpaces(document.getElementById('txtCaptcha').value);
if (input.value != cap ) {
input.setCustomValidity("Error in code Please Check!");
} else {
input.setCustomValidity('');
}
}
</script>
</body>
</html>
Output :
Here In This Html Tutorial We Will Create Captcha Function In Html/Javascript In Code.
Here Is An Example Related To Topic....
Step 1:
<html>
<head>
<script type="text/javascript">
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">
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>
function check(input) {
var cap =removeSpaces(document.getElementById('txtCaptcha').value);
if (input.value != cap ) {
input.setCustomValidity("Error in code Please Check!");
} else {
input.setCustomValidity('');
}
}
</script>
</body>
</html>
Output :
No comments:
Post a Comment