Création de formulaire simplifiée
Page 1 sur 1 • Partagez
Création de formulaire simplifiée
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
Description du code HTMLLa balise form:Nous commençons donc par la balise form à laquelle nous avons attribué
Les modes (data-mode):3 modes sont disponibles.
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:
L'action (action):L'action est toujours désactivée par le script, il est inutile de modifier cet attribut. Les 3 p'tits |
textarea | |
select | |
input | type: text tel url hidden color password number radio checkbox range date time |
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=" / ">
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">
- 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>

Ce tutoriel a été rédigé par le Staff du Forum des Forums, Et en particulier par no_way. Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI. |


no_way- Aidactif
- Messages : 2206
Inscrit(e) le : 26/03/2010
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum