Création de formulaire simplifiée

par **no_way** Mer 21 Sep 2016 - 11:35

Création de formulaire simplifiée

	Cette asstuce requiert, au minimum, de bonnes connaissances (de base) du langage HTML. A noter que cette astuce est moins "puissante" que si vous maîtrisez javascript.

Cette astuce a pour but de vous permettre de créer un formulaire sans nécessité de connaitre Javascript pour le formatage du texte à envoyer.

Le code minimal à insérer dans une page HTML

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML

Cliquez sur Créer une nouvelle page HTML et choisissez d'utiliser le haut et le bas de votre forum. Sur cette page HTML, insérez le code suivant :

Code:: <form data-mode="UN_MODE" data-arg="ARGUMENT" data-subject="SUJET au moins 10 caractères 255 caractères maxi" action="#" id="ID_DU_FORMULAIRE"> ... <input type="submit" value="Envoyer" /> <textarea class="message"> VOTRE MESSAGE </textarea> </form> <script type="text/javascript" src="https://fa7up.fr/faForm.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded",function(e){ var mon_formulaire=new faForm("ID_DU_FORMULAIRE"); }); </script>

N'oubliez pas de cliquer sur le bouton Valider pour enregistrer les modifications.

Description du code HTML

La balise form:

Nous commençons donc par la balise form à laquelle nous avons attribué :

data-mode ;
data-arg ;
data-subject ;
id ;
action.

Les modes (data-mode)

Trois modes sont disponibles :

Modes	Descriptions
mp	Envoie un Message Privé, l'argument devra être le pseudo du destinataire.
reponse	Répond à un sujet, l'argument doit être l'identifiant du sujet (valeur numérique), si votre sujet est à l'adresse http://mon_forum/t39-mon-sujet, alors l'identifiant est 39, il s'agit de la valeur numérique après le "t".
nouveau_sujet	Crée un nouveau sujet, l'argument doit être l'identifiant du sous-forum (valeur numérique), si votre sujet est à l'adresse http://mon_forum/f5-votre-presentation, alors l'identifiant est 5, il s'agit de la valeur numérique après le "f".

Ces trois modes ne peuvent être utilisés que si le membre est connecté.

L'argument (data-arg)

Expliqué ci-avant, si le mode est "reponse" ou "nouveau_sujet", un contrôle est fait afin de s'assurer que la valeur est bien numérique.

Le sujet (data-subject)

Vous devez le renseigner pour les trois modes, si vous ne le faites pas, alors il sera automatiquement assigné en indiquant l'id du formulaire qui n'a pas de sujet défini. Le sujet doit être d'une longueur comprise entre 10 et 255 caractères.

L'identifiant (id)

L'id, si changé, doit être reporté dans la ligne de script suivante :

Code:: var mon_formulaire=new faForm("ID_DU_FORMULAIRE");

L'action (action)

L'action est toujours désactivée par le script, il est inutile de modifier cet attribut.

Les 3 p'tits cochons points

C'est ici que vous devrez placer les champs de votre formulaire, champs qui DEVRONT avoir un attribut name écrit en minuscules et sans caractères accentués.

Champs supportés	types
textarea
select
input	text ; tel ; url ; email ; hidden ; color ; password ; number ; radio ; checkbox ; range ; date ; time.

Si le membre ne remplit pas un champ, vous pouvez indiquer au script de choisir une valeur autre que du vide en ajoutant au champ désiré l'attribut "date ; time.data-fallback", exemple :

Code:: <input type="text" name ="pseudo" data-fallback="inconnu">

Dans le cas des champs en mesure de prendre des valeurs multiples, à savoir "checkbox" et "select" la jointure des valeurs est par défaut ", ", vous pouvez redéfinir cette jointure en ajoutant l'attribut "data-join", exemple :

Code:: <input type="checkbox" name="couleurs[]" value="rouge" data-join=" & "> <input type="checkbox" name="couleurs[]" value="vert"> <input type="checkbox" name="couleurs[]" value="bleu">

Notez que l'assignation de ces attributs ("data-fallback" et "data-join") n'est nécessaire que pour la première balise d'un ensemble partageant le même nom (attribut "name"), ainsi :

Code:: <input type="checkbox" name="couleurs[]" value="rouge" data-join=" & "> <input type="checkbox" name="couleurs[]" value="vert"> <input type="checkbox" name="couleurs[]" value="bleu" data-join=" / ">

La jointure sera " & ", la déclaration pour " / " ne sera pas prise en compte.

Le textarea avec pour classe message

C'est dans ce textarea qu'il vous faut écrire le message à envoyer. Ecrivez normalement votre message, lorsque vous souhaitez mettre la valeur d'un champ,
mettez la valeur de son attribut name entre %_{ et } en majuscules, par exemple si vous avez un champ :

Code:: <input name="pseudo" type="text">

Vous pourriez mettre dans le textarea message :

Code:: Bienvenue parmi nous %_{PSEUDO} !

Il est inutile d'ajouter une classe CSS pour cacher ce champ, le script le supprime de lui-même.

Paramétrage du script

Pour éviter la remise à zéro du formulaire une fois le message envoyé, il faut ajouter une option nommée "reset_onLoad" à l'initialisation du script, faites comme ceci:

Code:: document.addEventListener("DOMContentLoaded",function(e){ var options={reset_onLoad:0}; var mon_formulaire=new faForm("ID_DU_FORMULAIRE",options); },false);

Un petit exemple

Parce que souvent la compréhension se fait par l'exemple, voici un formulaire très simple où nous allons demander, pour un forum RPG, d'indiquer le nom, l'âge qui devra être entre 7 et 100 ans, et le genre du personnage joué.

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des pages HTML

Cliquez sur Créer une nouvelle page HTML et choisissez d'utiliser le haut et le bas de votre forum. Sur cette page HTML, insérez le code suivant :

Code:: <form data-mode="mp" data-arg="VOTRE_PSEUDO" data-subject="Exemple du tuto" action="#" id="mon_formulaire"> <label>Nom de votre personnage:<input type="text" name="nom" required></label><br /> <label>Son âge (de 7 à 100 ans):<input type="number" name="age" min="7" max="100" required></label><br /> Son genre:<label><input type="radio" name="genre" value="un homme" checked>Homme</label> <label><input type="radio" name="genre" value="une femme">Femme</label><br /> <input type="submit" value="Envoyer" /> <textarea class="message"> Bonjour, j'aimerais incarner le personnage %_{NOM}, c'est %_{GENRE} de %_{AGE} ans ! </textarea> </form> <script type="text/javascript" src="https://fa7up.fr/faForm.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded",function(e){ var mon_formulaire=new faForm("mon_formulaire"); }); </script>