• une question piège (3+2=?)
• une image contenant des caractères à recopier (la méthode la plus connue et la plus utilisée des captcha)

Et bien maintenant il y a un slider avec QapTcha.

Plutôt facile à implémenter, QapTcha a la particularité d’utiliser jQuery UI.

A découvrir donc.

QapTcha : jQuery captcha system with jQuery & jQuery UI

Elle est pas belle là vie de développeur web ?

Un petit exemple ?

[javascript]
$(document).ready(function(){
$("#contact").formation();

$.formation.addInput({type:"text", labelValue:"Votre nom:", required:true});
$.formation.addInput({type:"text", labelValue:"Votre email:", validation:’email’, required:true});
$.formation.addTextarea({
name:"message",
labelValue:"Votre message:",
required:true,
cols:"60",
rows:"10"
});
$.formation.addButton({value: "SUBMIT"});
});
[/javascript]

Et voila, vous avez un joli formulaire de contact, avec contrôle des champs sur sa validation

Le « tout javascript » me laisse un peu perplexe mais c’est quand même à découvrir.

Lien :

• jQuery – Formation

Voila en quelques lignes de jQuery comment réaliser cela

[javascript]
var myInput = $(‘#search’);
myInput
.data(‘valInit’, input.val())
.focus(function() { if ($(this).val() === $(this).data(‘valInit’)) $(this).val( »); })
.blur(function() { if ($(this).val() ===  ») $(this).val($(this).data(‘valInit’)); });
[/javascript]

Même plus besoin de cliquer sur un bouton pour valider le formulaire puisque la recherche du couple identifiant / mot de passe se fait au fur et à mesure de la saisie.

Le tout en utilisant jQuery et PDO.

Attention, je vous invite cependant à ne prendre de cette source que l’idée générale et non pas la réalisation car celle-ci est plutôt discutable (et discuté).

jQuery Live Login inspired by Google Instant Search

Comment fonctionne-t-il ?

Uploadify utilise bien évidemment jQuery mais aussi la technologie Flash. Il utilise donc également la bibliothèque SWFObject.

Son implémentation est donc relativement simple puisque vous partez d’un simple input de type file :

[html]<input id="fileInput" name="fileInput" type="file" />[/html]

Et voici un exemple de configuration de ce plugin :

[javascript]
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader' : 'uploadify.swf',
'script' : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads'
});
});
// ]]>
</script>
[/javascript]

Et vous obtenez ainsi un joli formulaire d’envoi de fichiers

Lien :

• Uploadify

D’ou le plugin jQuery InputNotes.

Pour la mise en place cela donne :

[javascript]
$(document).ready(function(){
$("#message").inputNotes(
{
sexwarning: {
pattern: /(^|\s)sex(\s|$)/ig,
type: ‘warning’,
text: ‘Do not type "sex"!’
},
numbersnote: {
pattern: /[0-9]/,
type: ‘note’,
text: ‘Do not type numbers!’
}
}
);
});
[/javascript]

Et cela donne par exemple en cas de saisie des lettres « sex » :

Les expressions régulières sont ici utilisées pour les vérifications et deux types de « notes » sont permises :

• le message d’alerte (warning),
• la simple indication (note).

Pour bloquer la validation de formulaire en cas d’erreur il faut rajouter un code du style :

[javascript]
if ( $("#message").hasInputNotes(‘warning’) ){
// don’t send form
}
[/javascript]

Lien:

• InputNotes jQuery Plugin

XSS

Autrement dit il s’agit de « cross-site scripting ». Une grosse faille de sécurité dans la programmation de site web. Le principe : injecter de données qui vont être executer.

Exemple :

En appelant l’URL suivante :

Vous obtenez :

Pour s’en prémunir ?

Il existe plusieurs types de faille XSS. L’exemple ci-dessous est sans doute l’erreur la plus flagrante : ne pas vérifier ces variables reçus en GET. Il faut également rester vigileant sur les variables envoyés par un formulaire, surtout si celles-ci vont servir dans une requête SQL.

Liens :

• Cross-site scripting sur Wikipedia
• Comment reproduire une faille XSS ? sur developpez.com

Aujourd’hui la question est sur la façon de positionner les labels par rapport à la zone de saisie.

Avant ? Après ? Et pourquoi pas dedans ?

L’idée est simple.

Vous partez de la structure suivante :

[html]
<p>
<label for="field_id">Label Text</label><br />
<input type="text" name="field_id" value="" id="field_id">
</p>
[/html]

Vous appliquez le css suivant :

[css]
form p { position:relative }
label { position:absolute; top:0; left:0}
[/css]

Et vous lancez le plugin :

[html]
$(document).ready(function(){
$("label").inFieldLabels();
});
[/html]

Simple non ?

Le label change de couleur lorsque la zone a le focus et disparait à la première saisie.

Démo, option et source sur le site officiel.

Lien :

• In-Field Labels jQuery Plugin

Ce tutorial va vous expliquer comment utiliser la méthode animate() et jouer avec la propriété height afin de cacher/faire apparaitre n’importe quel bloc.

Lien :

• Animate a Contact Us Slide-Out Area using jQuery

Pratique pour mettre en place du gest-blogging !

Une fois installé et activé, il vous suffit de créer une page qui va générer un formulaire. Le plugin va rajouter des états supplémentaires à vos articles, états directement visibles sur votre tableau de bord.

Lien :

• TDO Mini Forms (Site officiel)
• TDO Mini Forms (WordPress.org)