Protecting Web Forms with AJAX - Developing a verification code mechanism (
Page 2 of 4 )
Since my plan here will consist of demonstrating how to build a verification code generator with Ajax, which can be easily coupled to an existing HTML form, the first step we must be take is creating the form in question.
Thus, with that idea in mind, below I included the signature of a simple (X)HTML file. It contains a basic web form for implementing the checking code generator. Here’s how this brand new sample file looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax-based Random Code Generator System</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: bold 9pt Arial, Helvetica, sans-serif;
color: #000;
}
#formbox{
width: 380px;
text-align: right;
padding: 10px;
background: #eee;
}
#codebox{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #00f;
}
.inputbox,textarea{
width: 300px;
border: 1px solid #999;
}
.checkingcode{
width: 50px;
border: 1px solid #999;
}
</style>
</head>
<body>
<h1>Ajax-based Random Code Generator System</h1>
<div id="formbox">
<form action="check_form.php" method="post">
<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>
<p>Last Name <input type="text" class="inputbox" title="Enter your last name" /></p>
<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>
<p>Enter your comments below:</p>
<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>
<div id="codebox"></div>
<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Enter the above four-digit verification code" /></p>
<p><input type="submit" value="Send Data"></p>
</form>
</div>
</body>
</html>
As you can see, the above (X)HTML file includes a typical HTML contact form, where users will be able to enter their first and last names, and their email addresses. Also, there are a few additional CSS styles that are useful for improving the look and feel of the web form.
As you may have noticed, there’s another input box labeled “code,” which will let users manually enter the corresponding verification code. As I said in the introduction, this code will be generated via an HTTP request triggered with Ajax. But in fact I’m getting ahead of myself, since the details of this process will be discussed in the next section.
All in all, at this point I've created a primitive web form that, in its current state, is pretty vulnerable to attacks from any spam robot. Thus, it’s time to make it a bit safer by means of the code checking generator mentioned previously.
Thus, to see how this Ajax-driven program will be developed, please click on the link that appears below and keep reading.
