Sécurité formulaire

Edit : Exactement de la sorte

Il y a un plugin jQuery qui a pas l'air mal : Visual captcha

Le plugin de Pewel a l'air pas mal. Ton exemple Benjamin n'est pas fonctionnel sur appareils tactiles ce qui est, à mon sens, une grosse erreur d'ergonomie à l'heure actuelle.

Merci Pewel, c'est une bonne alternative, mais j'aimerais apprendre à le créer moi même, ça peut être utile par la suite :)
Sait on jamais, au cas où le boss ne veuille pas utiliser de librairie externe =D

@prbaron : j'ignorais, je pensais que le drag & drop aurait pu y être compatible .
Bon alors je reste sur ma solution , pratique mais très simple :

<?php $secur = rand(1,20);?>
<input type="hidden" name="secur_ask" value="<?= $secur;?>">
<label for="secur">Indiquer le nombre <strong><?= $secur;?></strong></label>
<input id="secur" type="number" name="secur_answer" min="0" max="150">
<!-- et coté js : -->
    var form = $("form#contact");
        $(form).submit(function(){
            var number = $(this).find("input[name=secur_ask]").val();
            var answer = $(this).find("input[name=secur_answer]").val();
                if(number != answer)
                {
                    alert('Code de sécurité incorrect !');
                    return false;
                }

Le meilleur moyen de faire son propre truc, c'est de s'inspirer de l'existant et de faire ta librairie là dessus, en regardant comment ça fonctionne.
Ca peut être long mais au moins tu sais ce qu'il y a dedans :)

J'ai essayé de trifouiller dans le code source de underscreen et il y a des partie minifiées donc pas trop compréhensibles...

Si tu veux mon code source je peux te le filer ici( je suis le webmaster de underscreen).

pour le coup je me suis inspirer de visual captcha car j'avais envie d'autre chose qu'un captcha "ordinaire".

J'ai vu que tu ne voulais pas la solution mais la méthodologie du coup je te guide du mieux que je peux !

j'ai tout d'abord récupérer le drag and drop de base de w3school ...
soit pour le script :

function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

pour le html :

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69"

ici c'est une image moi j'ai choisi de faire appel à la librairie fontawesome pour les images.
Pour finir j'ai juste créer une fonction qui check si oui ou non il y a l'image dans la div
grâce à la fonction length de jquery
En gros elle va compter le nombre d'élément (ici l'image) qui vont être dans la div.
Pour moi c'est soit 0 soit 1...
Si c'est 1 alors j'ajoute la valeur success à un champ caché et le reste c'est du PHP.

Je l'avais décliner en créant le bouton envoyé grace à .html() encore et toujours de jquery :$

Bref voila en gros j'espère avoir été clair !

Edit : pour le mobile je ne savais pas que le drag and drop passait pas cmme ça c'est embêtant en effet. J'ai plus de smartphone et mes test sur différent site pour l'affichage marchait sans problème forcément...

En captcha formulaire de contact qui passe peut être et que je trouve sympa il y a ça !