Création de formulaire simplifiée

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Création de formulaire simplifiée

Message 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" action="#" id="ID_DU_FORMULAIRE">
...
<input type="submit" value="Envoyer" />
<textarea class="message">
VOTRE MESSAGE
</textarea>
</form>
<script type="text/javascript" src="http://fa.codexo.org/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.

mpenvoie un Message Privé, l'argument devra être le pseudo du destinataire.
reponseré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_sujetcré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.


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
inputtype:
text
tel
url
email
hidden
color
password
number
radio
checkbox
range
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 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">

Warning
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" 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="http://fa.codexo.org/faForm.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(e){
var mon_formulaire=new faForm("mon_formulaire");
});
</script>
Pensez à modifier VOTRE_PSEUDO par votre pseudo Smile



no_way
Aidactif
Aidactif

Messages : 1739
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum