Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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

ModesDescriptions
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 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éstypes
textarea
select
inputtext ; 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>

Pensez à modifier VOTRE_PSEUDO par votre pseudo

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



Création de formulaire simplifiée Signature-no_way
no_way

no_way
Aidactif
Aidactif

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

Voir le profil de l'utilisateur
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