Création de formulaire simplifiée

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

Création de formulaire simplifiée

Ce tutoriel a pour but de vous permettre de créer un formulaire sans nécessité de connaitre javascript pour le formatage du texte à envoyer.

La solution présentée ici est forcément moins puissante que si vous maîtrisez javascript, de plus elle ne dispense pas d'avoir des connaissances en HTML.

Le code minimal à insérer dans une page HTML

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>

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):

3 modes sont disponibles.

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 3 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 3 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.

Les champs supportés:

textarea
select
input	type: 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
"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é.

Créez une nouvelle page HTML avec "Voulez-vous utiliser le haut et le bas de page de votre forum ?" à oui et mettez le contenu 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>