Hi y@1998,
Refer below sample.
HTML
MasterPage.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
CS.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="CS.aspx.cs" Inherits="CS" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script>
var code;
function createCaptcha() {
document.getElementById('captcha').innerHTML = "";
var charsArray =
"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
var lengthOtp = 6;
var captcha = [];
for (var i = 0; i < lengthOtp; i++) {
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 = 100;
canv.height = 50;
var ctx = canv.getContext("2d");
ctx.font = "15px Georgia";
ctx.strokeText(captcha.join(""), 0, 30);
code = captcha.join("");
document.getElementById("captcha").appendChild(canv);
}
function validateCaptcha() {
event.preventDefault();
if (document.getElementById("cpatchaTextBox").value == code) {
alert("Valid Captcha")
} else {
alert("Invalid Captcha. try Again");
createCaptcha();
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<body>
<asp:Label ID="batch" runat="server" Text=""></asp:Label>
<asp:Label ID="batch1" runat="server" Text=""></asp:Label>
<asp:Label ID="name" runat="server" Text=""></asp:Label>
<asp:Label ID="type" runat="server" Text="" Visible="false"></asp:Label>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<center>
<div class="form-gap">
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="text-center">
<h2 class="text-center">
<b>Sign In</b></h2>
<div class="modal-footer">
</div>
<div class="panel-body">
<form id="register_form" runat="server" role="form" method="post" onsubmit="validateCaptcha()">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<asp:TextBox ID="mail" runat="server" class="form-control" placeholder="abc@gmail.com"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
ForeColor="Red" ControlToValidate="mail"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<asp:TextBox ID="password" runat="server" class="form-control" TextMode="Password"
placeholder="*********"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
ForeColor="Red" ControlToValidate="password"></asp:RequiredFieldValidator>
</div>
</div>
<input type="text" placeholder="Captcha" id="cpatchaTextBox" class="form-control"
required />
<div id="captcha">
</div>
<asp:Button ID="Button1" runat="server" Text="Sign In" CssClass="btn btn-primary btn-block btn-lg"
OnClick="Button1_Click" />
</form>
</div>
<p class="hint-text">
<a href="forgotpass.aspx">Forgot Password?</a></p>
</div>
</div>
</div>
</div>
</center>
</body>
</asp:Content>
Code
protected void Button1_Click(object sender, EventArgs e)
{
}
Screenshot
