Капча-слайдер

CAPTCHA — это программа, которая пытается определить — человек или компьютер (точнее специальная программа — робот) с ней работает. Вы наверняка сталкивались с каптчей, когда вас просили при регистрации ввести символы, в точности повторяющие искаженные символы на картинке. О популярности каптчи свидетельствует следующая цифра — около 200 миллионов человек ежедневно решают ребусы-каптчи! Каптчи должны защитить сайт от “ботов”, автоматических программ, создаваемых для генерации спама. Программа не может так же хорошо распознавать сильно искаженный текст так же хорошо, как человек. Таким образом “боты” не могут преодолеть заградительный барьер из каптчи и свободно путешествовать по сайту, загружая на него спам. Если быть точным, то не могут только в том случае, когда текст на каптче сильно зашумлен и искажен. Обычные каптчи с прыгающими буквами или цифрами даже на сложном цветном фоне могут быть распознаны специальной программой. В этом и заключается главный минус стандартной каптчи — повышение стойкости защиты от спама приводит к трудности распознавания ее человеком.

ПОЛЕЗНО  Смена action в form средствами jquery

Капча-слайдер

И вот тут на смену приходит совершенно неожиданное решение, о котором я недавно узнал на сайте www.aboone.com Автор предлагает заменить каптчу слайдером, передвигая который, мы доказываем, что мы не боты, а обычные люди, владеющие мышью.

Подключение:

	<link rel="stylesheet" href="/templates/css/cap-slider.css" type="text/css" />
	<script type="text/javascript" language="javascript" src="/templates/js/js/cap-slider.js"></script>

пример формы:

        <div class="Test-Dialog-Box-Conteiner" id="messForma" style="display:none;">
            <form action="" method="post" name="form" id="messForm" target="_blank">
                <input type="hidden" value="send" name="action">
                <input type="hidden" value="2" name="department">
                <div class="Dialog-Box-Forma-Text W100"><label for="messName">Name:<span class="asterix">*</span></label></div>
                <div class="Test-Dialog-Box-Conteiner-Border">
                    <div><input type="text" name="field_43" maxlength="120" id="messName"></div>
                </div>

                <div class="Test-Dialog-Box-Conteiner-Border">
                    <div><input type="text" name="fname2" id="fname2" maxlength="120"></div>
                </div>

                <div class="Dialog-Box-Forma-Text W100"><label for="messPhone">Phone:<span class="asterix">*</span></label></div>
                <div class="Test-Dialog-Box-Conteiner-Border">
                    <div><input type="text" name="field_44" maxlength="15" id="messPhone"></div>
                </div>
                <div class="Dialog-Box-Forma-Text W100"><label for="messEmail">E-mail:<span class="asterix">*</span></label></div>
                <div class="Test-Dialog-Box-Conteiner-Border">
                    <div><input type="text" name="field_9" maxlength="255" id="messEmail"></div>
                </div>
                <div class="Dialog-Box-Forma-Text W100"><label for="messText">Question:<span class="asterix">*</span></label></div>
                <div class="Test-Dialog-Box-Conteiner-Border">
                    <div>
                        <textarea name="field_10" id="messText"></textarea>
                    </div>
                </div>    
               <div class="Test-Dialog-Box-Conteiner-Button alignRight" id="messClick" style="display:none;">Submit</div>
<div id="slider3" class="slider"></div>
<script>
$(function(){
   var s = new Slider('slider3', {
       message: "turn to send!",
       color: "red",
       handler: function(){
		var urlf="http://site.com/message_send.php";
		$("#messForm").attr("action",urlf);
		$('#messClick').click();
      }
   });
   s.init();
});
</script>
            </form>
        </div>