Оригинальная капча для сайта и формы обратной связи

WebDev

Содержание

Что такое капча (captcha)?
1. Виды капчи
Оригинальная капча на PHP, CSS, JS

Что такое капча (captcha)?

Вечная проблема, с которой сталкиваются большинство веб-мастеров, это богатое обилие спама в комментариях и почтовом ящике, отправленного через форму обратной связи. Было придумано большое количество способов бороться с этим недугом, но большинство из них утратили свою актуальность, так как работы научились распознавать текст на картинках и простейшие задачи.

Капча (от CAPTCHA — англ. Completely Automated Public Turing test to tell Computers and Humans Apart — полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей) – это эффективный и чуть ли не единственный метод защиты от рекламы в комментариях и письмах. Специальный тест для определения пользователя системы (человек или робот). Зачастую это автоматически генерируемая картинка с искаженными символами (буквами или цифрами).

Виды капчи

Один из самых простых и неэффективных видов капчи – это отметка в поле checkbox, согласие с чем бы то ни было. Эту проверку до сих пор использует Google при подтверждении прав на сайт в панели веб-мастера.

captcha-ya-ne-robot

Цифровая или буквенная капча, содержащая различные символы, часто искаженные (с применением шума, искривления, наложения дополнительных линий или произвольных фигур). Может содержать два слова сразу.

captcha-yandex

captcha-phpbb

captcha-recaptcha

Образная капча, основанная на выборе одного или нескольких изображений в соответствии с заданием, о чем в дальнейшем пойдет речь.

captcha-vybor-kartinok

Математическая капча часто представляется в виде простого примера (сложить или вычесть целые числа). Достаточно эффективно, но, в случае сложных задач, далеко не каждый сможет вычислить конечный результат.

captcha-primer

Оригинальная капча на PHP, CSS, JS

В этом уроке мы рассмотрим, как создать оригинальную капчу для сайта с использованием PHP, CSS и JS, которая на протяжении нескольких месяцев успешно боролась со спамом. Я не претендую на высокую эффективность данной защиты, скорее этот метод для тех, кто хочет отличиться оригинальностью.

forma-obratnoy-svyazi-s-kapchey

При выборе правильного варианта обрамление картинки окрашивается зеленым, неправильного – красным. При обновлении страницы очередность изображений каждый раз меняется.

vybor-pravilnogo-varianta

vybor-nepravilnogo-varianta

Это не обязательно должны быть животные. Составляйте группу картинок по своему вкусу.

Предположим, у вас уже есть готовая форма на HTML и составлен обработчик событий на PHP. Перед кнопкой отправки сообщения вставляем JS скрипт:

<script type="text/javascript">
function cl(o) {
  o.checked = !(o.checked && o.checked1);
  o.checked1 = !o.checked1;
  if(o.checked) {
    var hf = document.getElementById(o.name + "_hidden_id111");
    if(null === hf) {
      hf = document.createElement("input");
      hf.type = "hidden"; hf.id = o.name + "_hidden_id111";
      o.parentNode.appendChild(hf);
    }
    if(hf.r && (hf.r != o)){hf.r.checked1 = false;}
    hf.r = o;
  }
}
</script>

И составляем массив из наших картинок:

<?php
$captcha[] = '<input id="captcha_1" class="captcha" name="captcha" value="Лев" type="radio" onclick="cl(this);" /><label class="captcha_img" for="captcha_1"><img src="/img/1.jpg" class="access" /></label>';
$captcha[] = '<input id="captcha_2" class="captcha" name="captcha" value="Дельфин" type="radio" onclick="cl(this);" /><label class="captcha_img" for="captcha_2"><img src="/img/2.jpg" /></label>';
$captcha[] = '<input id="captcha_3" class="captcha" name="captcha" value="Лошадь" type="radio" onclick="cl(this);" /><label class="captcha_img" for="captcha_3"><img src="/img/3.jpg" /></label>';
$captcha[] = '<input id="captcha_4" class="captcha" name="captcha" value="Птица" type="radio" onclick="cl(this);" /><label class="captcha_img" for="captcha_4"><img src="/img/4.jpg" /></label>';
?>

Для отправки сообщения выберите изображение льва:<br />

<?php
shuffle($captcha);
foreach ($captcha as $field) {
  echo "$field ";
}
?>

К правильному варианту в теге IMG дописываем класс access. Собственно, и сам код CSS:

.captcha {display: none;}
.captcha:checked + label img {border: 3px solid #991616;}
.captcha:checked + label img.access {border: 3px solid #44ab00;}
.captcha_img img {cursor: pointer; margin-right: 6px; padding: 3px; border: 3px solid #f0e7de;}

3,685 total views, 4 views today