Home arrow DHTML arrow Page 2 - A Basic Method for Building Noisy Images
DHTML

A Basic Method for Building Noisy Images


Noisy images (used for captchas) are one way to help insure the security of online forms and prevent them from being abused. In this article, the first part of a three-part series, you will learn how to build noisy images with a simple combination of CSS, (X)HTML and a friendly scripting language, such as PHP. This method offers less complexity than the more conventional methods of building noisy images.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
May 14, 2007
TABLE OF CONTENTS:
  1. · A Basic Method for Building Noisy Images
  2. · Creating a simple contact form
  3. · Defining a simple PHP script
  4. · Completing the creation of a noisy image

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials