By now all of us at one time or another have had to read a construed image and type the letters and numbers we saw into a textbox.  This test is what is known as a CAPTCHA, and it prevents bots (programs created to spam websites among other objectives) from submitting a form on a website.  The reason it prevents bots from submitting a form (and its agenda) is because bots can't decipher the text within an image, and thus it cannot fill out the correct response in the textbox.  Although there are ways around CAPTCHAs for the most sophisticated bots, you can be relatively sure that a form submission is from a human in using this test.

A Random CAPTCHA Example

Captcha Example - Randomly Generated

You can refresh this page any number of times and each time you should see a different CAPTCHA image above.  Pretty cool, right? Generating an image like this on the fly isn't so bad at all actually, but I'll save that post for a different day! Instead, I'll present some other types of tests you can use in place of CAPTCHA.

The Math Test

This one is really simple to implement.  All you do is place a field on the form that asks a simple math question:

What is 1 + 2? 

Once the form is submitted, the form handler checks to see if the value in this field is "3".  If it is, we can say it was a human that submitted the form!  I'd prefer solving a simple math problem over typing the letters and numbers I see in an image any day of the week!  Of course, this test is completely capable of solving for the more sophisticated bots, but nevertheless - it's an alternative!  You could ask other types of questions too (i.e. is fire hot or cold?), not just math questions; just make sure it's easy to answer!

The JavaScript Trick

Typical bots can't execute JavaScript; so this test involves writing a bit of JavaScript code to dynamically add a field to a form.  The form handler (again, on the server-side) checks to see if the field was submitted; if it wasn't, then we know a bot tried to submit the form!  Cake.  Here's some example code that dynamically adds a textfield to a form:

function addFieldTo(form_id) { 
    var form = document.getElementById(form_id); 
    var textbox = document.createElement('input'); 
    textbox.type="text"; 
    textbox.name="test"; 
    textbox.style.display="none"; 
    form.appendChild(textbox); 
}

In the code above, I am creating a textbox (input field) with a name of "test" and setting its CSS display property to "none" because I don't want my human visitors to see the textbox. Why make them fill out an additional field if it's not necessary? Now in the form handler, I would just check to see if a field with the name of "test" was submitted.  Like I said, cake!

The CSS Trick

Bots like to make sure they fill out every field on a form to better their chances of submitting a form.  This trick places a simple input field on the form again and hides it from humans.  The form handler then simply checks to see if the field is blank upon submission.  If it is, we can say it was a human! If not, it's a bot!

My Recommendation

The more sophisticated the test is, the less submissions you'll get from bots.  Always go with what makes the most sense to you and your situation, but always think about HUMANS FIRST, and bots second.  After all, your website is for humans to use, not bots!