A Basic Method for Building Noisy Images - Creating a simple contact form
(Page 2 of 4 )
A good place to start demonstrating how to include a simple noisy image into a web site is by creating a typical contact form where users are asked to fill in the corresponding fields with basic information, such as first and last names and an email address.
Basically, the visual appearance that I plan to give to this sample contact form containing a basic noisy image is depicted by the screen shot below:
As you can see, the previous web form contains a few common input boxes for entering basic user data. It also includes a four-digit random value, which is displayed in front of a simple noisy background. In this case, I decided to create a simple pattern, like the one shown below, to build the image in question; as you know, the background can be easily modified with your favorite image editing software.
This being said, here the pattern that I used to build the previous noisy image:
Quite simple to create, right? Now that you know how to build the background that comprises the noisy image that you saw before, please examine the signature of the following (X)HTML file. It is responsible for displaying the pertinent contact form. Its definition is as follows:
<!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>Example using simple noisy image</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
textarea{
width: 250px;
padding: 2px 0 2px 0;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
#formcontainer{
width: 35%;
padding: 10px 100px 10px 10px;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #999;
}
#formcontainer p{
font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
text-align: right;
}
.challengevalue{
display: block;
float: right;
width: 230px;
padding: 7px 9px 7px 10px;
margin: 10px 0 20px 0;
background: #fff url(noisy_image.gif) left center repeat-x;
font: bold 20px Arial, Helvetica, sans-serif;
color: #039;
text-align: center;
border: 1px solid #999;
}
.inputbox{
width: 250px;
padding: 3px 0 3px 0;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
border: 1px solid #999;
}
.formbutton{
width: 80px;
padding: 3px 0 3px 0;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}
</style>
</head>
<body>
<h1>Example using simple noisy image</h1>
<div id="formcontainer">
<form action="check_data.php" method="post">
<p>First Name <input type="text" name="fname" title="Enter your first name" class="inputbox" /></p>
<p>Last Name <input type="text" name="lname" title="Enter your last name" class="inputbox" /></p>
<p>Email <input type="text" name="email" title="Enter your email address" class="inputbox" /></p>
<p>Enter the four-digit code shown below:</p>
<p><span class="challengevalue">Noisy image goes here</span></p>
<p><input type="text" name="challenge" title="Enter the code shown above" class="inputbox" /></p>
<p>Enter the text of your message:</p>
<p><textarea name="message" title="Enter the text of your message here" rows="10" cols="10"></textarea></p>
<p><input type="submit" name="send" value="Send Data" class="formbutton" /></p>
</form>
</div>
</body>
</html>
As illustrated above, the markup and the CSS styles that display the previous contact form are indeed very easy to follow, so I won't bore you explaining how they work. Instead, I'd like to move on and show you how to develop a simple PHP script on the web server, which will be responsible for displaying a four-digit challenge value in front of the noisy background that was shown a few lines above.
Want to see how this simple PHP application will be developed to generate basic noisy images? Keep reading, please.
Next: Defining a simple PHP script >>
More DHTML Articles
More By Alejandro Gervasio
/ 3 
