AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Comment faire un formulaire (de présentation, de partenariat, etc.)

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Mar 14 Juin 2016 - 5:13



    Comment faire un formulaire 1/2



    Bonjour !

    Alors une des demandes fréquentes dans la section des demandes de codes est celle du fameux "formulaire". Un formulaire pour passer une commande, un formulaire pour poster une présentation, un formulaire pour les demandes de partenariats, etc.

    Ce tutorial vous montrera comment créer le formulaire de votre choix par vous-même. On y verra aussi comment mettre des champs obligatoires, comment gérer les différents types de champs à remplir et comment personnaliser le résultat du formulaire.

    Voici un petit exemple du type de résultat qu'on peut obtenir :
    http://forum-test-onyx5.forum-canada.com/h9-formulaire-de-bouffe

    Et un autre exemple d'un formulaire de présentation :
    http://www.never-utopia.com/t60709-formulaire-de-presentation

    Durant ce tutoriel, je ferai référence à quelques reprises au premier exemple.

    À noter que puisque la majorité des membres s'intéressent plus à l'application d'un formulaire dans le cadre de forumactif, le tutoriel fera de même.
    Vous pouvez quand même utiliser la plupart des notions apprises ici à l'extérieur de forumactif. Cependant, ce tutoriel ne traite pas du traitement PHP qui est nécessaire dans la majorité des cas si vous avez votre propre.


    Étape 1 - Squelette du formulaire



    Étape 1.1 - Juste le formulaire


    La première étape, afin de créer un formulaire, c'est de se créer une page HTML dans lequel nous allons mettre le squelette du formulaire.

    Pour ceux qui n'ont jamais utlisé une page HTML, voici un petit tuto sur les pages HTML fait par Nyo :
    http://www.never-utopia.com/t50282-creer-une-page-html-pour-fiche-de-pub-formulaires-etc


    Bref, vous créez une page HTML (en mode avancé, pas le mode simple) et vous y mettez la base de toute page HTML :
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="author" content="Auteur" />
        <title>Titre de la Page</title>

        <style type="text/css">
          /* Ici le CSS! */
        </style>

        <script type="text/javascript">
        //<!--
          /* Ici le Javascript */
        //-->
        </script>

      </head>
      <body>
        <!-- Ici le HTML! -->
      </body>
    </html>

    C'est le temps d'enregistrez votre page html pour la première fois.




    Nous allons maintenant créer le squelette du formulaire entre les balises "body". Pour cela, il va falloir modifier la page HTML que vous avez enregistrée.

    Lorsque vous modifiez votre formulaire, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.

    Bref, on va commencer le squelette du formulaire par ceci :
    Code:
       <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
          Contenu du formulaire
        </form>

    Hé, minute papillon! De késsé?

    J'imagine que vous l'avez deviné, mais la balise "form" est une balise de formulaire. Dans cette balise, il y a plusieurs attributs.

    Le "id" permet de donne un id unique au formulaire pour le sélectionner plus tard.

    Le "action" permet d'indiquer au formulaire où on va envoyer les données du formulaire pour qu'elles soient traitées. Dans notre cas, on met "/posting.forum" parce qu'on c'est la page de forumactif qui permet de poster un nouveau message/sujet).
    Si vous avez créé une page de traitement php parce que vous avez votre propre site, ce serait cette adresse qu'il faudrait mettre. Si vous vouliez envoyer un mail, vous pourriez utiliser l'adresse de traitement du logiciel de messagerie de votre choix, ce qui ferait "mailto:nomdudestinataire@hotmail.fr" par exemple.

    Le "method" indique la façon dont le formulaire est envoyé, soit selon la méthode "get" qui met les données dans la barre d'URL (dans la plupart des cas, très peu utile) ou selon la méthode "post" qui met les données dans le contenu html de la page de réception. Nous, c'est la méthode "post" qu'on veut.

    Le "name" est simplement un nom quelconque qu'on donne à ce formulaire. On va s'en servir plus tard dans le javascript.

    Le "enctype" précise la façon dont les données sont cryptées. C'est assez compliqué à expliquer alors disons simplement que dans la majorité des situations, on utilise le enctype "multipart/form-data".

    Le "target", dans cette situation, nous dit d'ouvrir un nouvel onglet pour poster le formulaire. Si vous mettez le formulaire dans un iframe plus tard, cela vous évitera de poster un message dans un message.

    Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


    Étape 1.2 - Comprendre les différents types de champs à remplir


    On a maintenant un formulaire, sauf qu'il est vide. Tout formulaire qui se respecte doit avoir des champs à remplir pour que l'utilisateur puisse fournir des informations.

    Ok, et à quoi ressemble un champ à remplir?

    À ceci :
    Code:
    <label for="question1">Question 1</label><br />
    <input id="question1" name="question1" value="" type="text" size="50"></input>

    Vous voyez qu'il y a 2 nouvelles types de balises, "label" et "input".

    Balise Label

    La balise "label" est une "étiquette", elle sert à "étiquetter" un champ à remplir. En soi, cette balise n'a rien de spécial, à l'exception que lorsqu'on clique dessus, cela met le focus sur le champs à remplir qui y est lié.

    D'ailleurs, c'est à cela que sert l'attribut "for", à associer un label à un input. La valeur de l'attribut "for" doit absolument être le même que le "id" du champ à remplir qui y est associé.

    -----------

    Balise Input

    La balise "input" est un champ à remplir.

    Le "id" permet de lier le champ au label (ne pas oublier qu'un id est "unique", alors ne mettez pas le même id à plusieurs champ).

    Le "name" sert à donner un nom au champ à remplir. Ce nom servira, plus tard, à sélectionner la valeur du champ dans un javascript pour transformer les données en un message. Il doit être unique pour chaque champ à remplir. Les seules exceptions sont celles du champ "radio" et du champ "checkbox" (on les verra plus tard).

    Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

    Le "size" contrôle la longueur du champ (en nombre de caractères). Cela fonctionne avec les champ text, mais pas tous les types de champ.

    Enfin, le "type" permet d'indiquer quel est le type de champ. Voici une petite liste des "type" de champ possibles :

    Hidden : C'est un champ caché et invisible

    Text : Pour du texte court.


    Radio : Pour des choix de réponse où il peut y avoir une seule option choisie.
    Oui ou Non

    Checkbox : Pour des choix de réponse où il peut y avoir plusieurs options choisies.
    Option1 et Option2

    Button : Pour un bouton.


    Number : Pour un nombre.


    Password : Pour un mot de passe.


    Reset : Pour rénitialiser le formulaire (vider les champs)


    Submit : Pour soumettre le formulaire.


    Cette liste n'est pas complète parce qu'il y a des "type" moins utilisés et qui ne sont pas acceptés sur tous les navigateurs. Pour une liste complète, on va à cet endroit.

    Aussi, je vous mets sous spoiler ce tutoriel de Riku qui démontre un peu plus les différents champs et certaines options à mettre dans les champs (readonly, disabled, selected, checked, etc.) :

    Tutoriel de Riku:
    Bonsoir les cocos.
    Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
    Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en HTML !! Je dis bien en HTML, le traitement en PHP c'est une autre histoire Razz

    Formulaire en HTML

    Je vais vous faire peur d'entrée... voici un code :

    Code:
    <form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
    <input type="hidden" name="Riku Asakura" value="Formulaire" />
    Votre nom : <input type="text" name="nom" />
    <br />
    Votre Prénom : <input type="text" name="Prénom" /> 
    <br />
    Votre adresse : <input type="text" name="Adresse" size="80" /> 
    <br />
    <textarea name="texte" cols=35 rows=10></textarea>
    <br />
    Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
    <br />
    Votre site : <input type="text" name="url" size=50 value="http://" />
    <br />
    <input type="submit" value="Envoyer le formulaire " name="submit" />
    <br />
    <input type="reset" value="Effacer " name="reset" />
     
    Ce qui donne:


    Votre nom :

    Votre Prénom :

    Votre adresse :



    Votre mot de passe :

    Votre site :





    Quelques explications :
    • action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
    • disabled : créé une liste ou un champs grisé.
    • "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
    • "checkbox" : Contenu de type="" - Créé une case à cocher.
    • "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
    • "button" : Contenu de type="" - Créé un bouton cliquable.
    • cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
    • maxlenght : délimite le nombre de caractères maximum dans un champ.
    • method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
    • name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
    • name pour créer un même groupe de bouton.(cf. exemple plus bas)
    • readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
    • rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
    • "password" : contenu de type="" - Créé un champ de saisie crypté.
    • value : Donne une valeur par défaut à un champ.
    • "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
    • "submit" : Bouton d'envoi de données.
    • type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
    • size : définit la largeur d'un champ.


    Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
    Code:
    <form>
    N-U est :
    <select name="liste">
    <option value="excellent">Excellent</option>
    <option value="super">Super</option>
    <option value="pas mal">Pas mal</option>
    <option value="pas top">Pas top</option>
    <option value="nul">Nul</option>
    </select></form>
    Résultat :
    N-U est :



    - Créer un choix par défaut dans une liste déroulante
    Code:
    <form>
    Never-Utopia est :
    <select name="liste">
    <option value="excellent">Excellent</option>
    <option value="super" selected="selected">Super</option>
    <option value="pas mal">Pas mal</option>
    <option value="pas top">Pas top</option>
    <option value="nul">Nul</option>
    </select></form>
    Donnera :

    Never-Utopia est :


    Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
    Code:
    selected="selected"
    dans l'option à sélectionner par défaut.

    On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
    Radio
    Code:
    <form>
    Les tutos de N-U sont :
    <input type="radio" name="tuto" value="excellents" />Excellents<br />
    <input type="radio" name="tuto" value="bons"  checked="checked" />bons<br />
    <input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
    <input type="radio" name="tuto" value="bof" />bof<br />
    <input type="radio" name="tuto" value="nuls" />nuls</form>

    Les tutos de N-U sont :
    Excellents

    bons

    Pas Mal

    bof

    nul


    Sauf qu'ici on aura utilisé
    Code:
     checked="checked"
    pour présélectionner un choix.
    On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
    Checkbox
    Code:
    <form>Vous trouvez que je suis :
    <input type="checkbox" value="excellent" />Barbant<br />
    <input type="checkbox" value="bon" checked="checked" />Agréable<br />
    <input type="checkbox" value="pas-mal"  checked="checked" />Beau gosse<br />
    <input type="checkbox" value="bof" />Trop long<br />
    <input type="checkbox" value="nul" />Je sais pô...</form>
    Vous trouvez que je suis :
    Barbant

    Agréable

    Beau gosse

    Trop long

    Je sais pô...


    Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
    Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
    ptdr !

    Enjoy Wink





    J'ai parlé d'une exception du "name" pour le type "radio" et le type "checkbox", n'est-ce pas? Le "name" nous sert dans le javascript à sélectionner la valeur d'un champ, donc il est important que tous les champs aient un "name" différent.

    Pour le type "radio" et le type "checkbox", il y a un petit pépin. En effet, pour une même question (un même label), il y a plusieurs champs (plusieurs input).

    Histoire de pouvoir démêler cela un peu, on va se servir du "checked" pour vérifier si un champ est coché ou non (on va voir le checked plus tard). Du coup, il n'y a plus besoin de mettre un "name" différent pour chaque input. Plutôt le contraire en fait.

    Il est important que, dans les cas de champs "radio" et "checkbox", tous les champs qui font partie d'une même question aient le même "name".

    Pourquoi? Parce que le "name" va permettre aux différents champs de rester associés entre eux. Dans le cas d'un champ de type "radio", on peut seulement cocher un champ parmi ceux qui ont le même "name" et si on coche un autre champ qui a le même "name", celui qui était coché précédemment se décoche.

    Perdu? Voilà un petit exemple pour vous montrer comme cela fonctionne quand on clique sur un champ radio :



    Et l'exemple en code :
    Code:
    <label for="question_quelconque">Question quelconque</label><br />

    <label for="option1">Option 1</label> <input id="option1" name="question_quelconque" value="Mon option 1" type="radio"></input><br />

    <label for="option2">Option 2</label> <input id="option2" name="question_quelconque" value="Mon option 2" type="radio"></input>




    Outre les balises "input" et "label", il y en a 3 autres qui peuvent être utile dans un formulaire.

    Il s'agit des balises "textarea", "select" et "option".

    Voilà à quoi elles ressemblent (en code) :
    Code:
    <textarea name="arara" id="blablabla">Bla bla bla.</textarea>

    <select name="restaurants" id="restaurants">
      <option>McDo</option>
      <option>PFK</option>
      <option>Mike</option>
      <option>Subway</option>
      <option>A&W</option>
      <option>Les frites de Suzanne</option>
    </select>


    Et voilà leur utilité/apparence :
    Textarea : C'est une balise utilisée pour du texte long.


    Select et Option : Pour des listes déroulantes. La balise "select" correspond à la liste en elle-même et les balises "option" sont les différentes options de la liste.


    Étape 1.3 - Créer les champs de notre formulaire


    J'ai vraiment besoin de l'expliquer?

    Maintenant que vous savez comment fonctionnent les champs, à vous de d'essayer de construire vos questions et vos champs pour votre formulaire ^^

    Voici  les questions et les champs pour l'exemple que je vous avais montré tout à l'heure :
    Code:
       <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">
          <input type="hidden" name="mode" value="newtopic" />
          <input type="hidden" name="topictype" value="0" checked="checked" />
          <input type="hidden" name="message" value="" />
          <input type="hidden" name="f" value="10" />
          <input type="hidden" name="subject" id="titre" value="" />
          <h1>Formulaire de commande de Bouffe, miam miam !</h1>
          <h2>Mes informations</h2>
          <label for="nom">Nom<span class="redd">*</span> :</label><br />
          <input type="text" size="50" name="nom" id="nom" /><br />
          <br />
          <label for="adresse">Adresse<span class="redd">*</span> :</label><br />
          <input type="text" size="70" name="adresse" id="adresse" /><br />
          <br />
          <label for="phone">Numéro de téléphone<span class="redd">*</span> :</label><br />
          <input type="text" size="20" name="phone" id="phone" /><br />
          <br />
          <h2>Commande</h2>
          <label for="resto">Nom du restaurant<span class="redd">*</span> :</label><br />
          <select name="resto" id="resto">
            <option>McDo</option>
            <option>PFK</option>
            <option>Buffet Chinois Hans</option>
            <option>Mike</option>
            <option>Subway</option>
            <option>Sushi Shop</option>
            <option>Chez Angelo l'Italien</option>
            <option>Les frites de Suzanne</option>
          </select><br />
          <br />
          <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
          <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
          <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />
          <br />
          <h3>Commande avec menu prédéfini</h3>
          <label for="nmenu">N° de menu :</label><br />
          <input type="number" style="width: 50px;" name="nmenu" id="nmenu" max="20" min="1" value="1" /><br />
          <br />
          <label for="nperso">Nombre de personnes qui commandent :</label><br />
          <input type="number" style="width: 50px;" name="nperso" id="nperso" max="20" min="1" value="1" /><br />
          <br />
          <h3>Commande personnalisée</h3>
          <label for="commande">Contenu de la commande</label><br />
          <textarea name="commande" id="commande"></textarea><br />
          <br />
          <h2>Paiement</h2>
          <label for="paie">Type de paiement<span class="redd">*</span> :</label><br />
          <label for="visa">Carte Visa</label> <input type="radio" name="paie" id="visa" checked="checked" value="Carte Visa" /><br />
          <label for="mastercard">Carte Mastercard</label> <input type="radio" name="paie" id="mastercard" value="Carte Mastercard" /><br />
          <label for="cash">Argent comptant</label> <input type="radio" name="paie" id="cash" value="Argent comptant" /><br />
          <label for="debit">Carte de débit</label> <input type="radio" name="paie" id="debit" value="Carte de débit" /><br />
          <br />
          <label for="trucs">Trucs pour faire baisser le montant total :</label><br />
          <label for="coupon">Coupon-rabais</label> <input type="checkbox" name="coupon" id="coupon" value="Coupon-rabais" /><br />
          <label for="ami">"Ami" du proprio</label> <input type="checkbox" name="ami" id="ami" value="Ami du proprio" /><br />
          <label for="cadeau">Cartes cadeaux</label> <input type="checkbox" name="cadeau" id="cadeau" value="Cartes cadeaux" /><br />
          <br />
          <label for="secret">Mon code secret VIP de "Chez Angelo l'Italien" :</label><br />
          <input type="password" size="30" name="secret" id="secret" /><br />
          <br />
          <br />
          <div style="text-align: center;">
            <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
            <input type="submit" name="post" value="Envoyer le formulaire" />
          </div>
          <br />
        </form>

    Note : Les h1, h2 et h3 sont simplement des balises de titres.
    Note2 : Les br sont des retour à la ligne, cela remplace un "enter" classique qui, dans une page HTML, ne sert à rien.

    À vous de jouer pour faire votre propre formulaire maintenant !

    Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

    Attention au champ pour envoyer le message !

    Sur forumactif, le champ pour envoyer le message, celui qui a pour type "submit", doit absolument avoir "post" dans son "name". Le name "post" sert à indiquer qu'on veut poster notre message et non pas faire quelque chose d'autre avec.

    Du coup, il doit ressembler à cela :
    Code:
    <input type="submit" name="post" value="Envoyer le formulaire" />

    D'ailleurs, si jamais vous voulez rajouter l'option de "prévisualiser" le message avant qu'il soit posté, vous pouvez faire un copier/coller du bouton, mais en utilisant le name "preview" à la place de "post".

    Du coup, le bouton prévisualiser ressemblerait à ceci :
    Code:
    <input type="submit" name="preview" value="Prévisualiser le formulaire" />


    Étape 2 - Les champs invisibles de notre formulaire


    Houston, on a un problème! Mais de quoi elle parle, des champs invisibles ? WTF ?

    Roh, allez, c'est pas si effrayant, je vous en ai déjà parlé tout à l'heure !

    Je parle ici des balises "input" de type "hidden", ceux qu'on peut mettre partout sans que la personne qui rempli le formulaire ne les voit.

    Mais pourquoi on en aurait besoin ??!

    Vous croyez peut-être que votre formulaire, une fois rempli, va savoir qu'il doit aller dans se poster en réponse à un sujet déjà créé ou qu'il doit créer un nouveau sujet dans un sous-forum précis? Nope, il n'en sait rien.

    Heureusement, on est là pour l'aider ^^

    Donc voilà les champs invisibles qui seront à ajouter directement après la balise "form" :
    Code:
          <input type="hidden" name="mode" value="newtopic" />
          <input type="hidden" name="topictype" value="0" checked="checked" />
          <input type="hidden" name="message" value="" />
          <input type="hidden" name="f" value="10" />
          <input type="hidden" name="subject" id="titre" value="" />

    .... Et ça veut dire quoi, ça? C'est bien beau d'aider le formulaire à savoir où aller, mais j'en ai pas plus idées que lui moi ><

    Ouais, j'imagine XD Allez, passons chaque ligne au peigne fin !


    Code:
    <input type="hidden" name="mode" value="newtopic" />
    Cela sert à définir le mode du message.
    Si on met "newtopic" comme valeur, c'est qu'on crée un nouveau sujet. Si on met "reply" comme valeur, c'est qu'on répond à un sujet déjà existant. Si on met "move" comme valeur, c'est qu'on veut déplacer un sujet.
    Je ne nommerai pas tous les modes, mais il y en a beaucoup, un pour presque chaque option possible sur forumactif.
    Nous, ce qui nous intéresse pour le moment, c'est le "newtopic" pour créer un nouveau sujet et le "reply" pour répondre à un sujet.


    Code:
    <input type="hidden" name="topictype" value="0" checked="checked" />
    Cela sert à dire quel type de sujet on crée.
    Si c'est un message normal, on lui donne la valeur "0".
    Si c'est une note (post-it), ce sera la valeur "1".
    Si c'est une annonce, ce sera la valeur "2".
    Si c'est une annonce globale, ce sera la valeur "3".


    Code:
    <input type="hidden" name="message" value="" />
    Il s'agit du contenu du message qui sera posté. Comme le message va prendre les données du formulaire, on le met vide pour le moment et on ira s'occuper de le remplir plus tard grâce au javascript.


    Code:
    <input type="hidden" name="f" value="10" />
    C'est le "où". Où est-ce que le message doit être posté?
    Le "f" dans le "name" indique que c'est dans un forum ou sous-forum.
    Si on voulait que ce soit dans une catégorie, on aurait mis la valeur "c".
    Si on aurait voulait que ce soit dans un sujet déjà créé, on aurait mis la valeur "t".

    Ensuite, le "10" dans le "value" indique dans quel forum/sous-forum/catégorie/sujet le message doit être posté.
    Autrement dit, vous vous rendez sur la page du sujet/sous-forum/etc. où vous voulez que le sujet soit posté et vous regardez dans la barre d'adresse.
    Directement après le "f" (ou c ou t), vous verrez un nombre.
    C'est ce nombre qu'il faut mettre dans "value".


    Code:
    <input type="hidden" name="subject" id="titre" value="" />
    C'est simplement le titre du sujet. Si vous voulez que la personne le remplisse par elle-même, vous pouvez changer le "type" pour "text" et l'intégrer au reste du formulaire. Sinon, laissez-le caché et on ira remplir le titre à l'aide du javascript plus tard ^^


    Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre ! Ensuite, assurez-vous de l'enregistrer régulièrement pour ne rien perdre ^^

    Et voilà pour cette section \o/


    Dernière édition par Onyx le Ven 31 Mar 2017 - 16:48, édité 22 fois



    avatar
    Onyx
    FémininAge : 23Messages : 2945

    le Mar 14 Juin 2016 - 5:18

    Comment faire un formulaire 2/2


    Étape 3 - Création du message (javascript)


    On a maintenant un formulaire qui contient des champs visible pour que l'utilisateur puisse le remplir et des champs invisibles qui aident le formulaire à poster comme il faut le message.

    Sauf qu'on a même pas encore de message à poster!

    Bref, c'est le temps de se retrousser les manches è_é


    Étape 3.1 - Ajout de la fonction


    On va commencer par retrouver ce bout de code :
    Code:
        <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">

    Et on va y ajouter cet attribut :
    Code:
    onSubmit="creationMessage(this)"

    Le "onSubmit" indique que l'action va se dérouler juste quand on va cliquer sur le bouton "Envoyer" en bas (celui avec le "type" "submit"). Quant au "creactionMessage(this)", il s'agit du nom que j'ai donné à une fonction du javascript qui va nous permettre de créer le message.

    Ça va jusqu'ici? Continuons!




    On va retrouver, dans notre page HTML, l'endroit où on avait mis l'espace pour le javascript. Cela ressemble à ceci :
    Code:
        <script type="text/javascript">
        //<!--
          /* Ici le Javascript */
        //-->
        </script>

    Puis on va créer la fonction "creationMessage(this)" :
    Code:
      <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {
          }
        //-->
        </script>


    Étape 3.2 - Ajout des champs "titre" et "message" dans la fonction


    Ensuite, on va vouloir aller remplir nos champs invisibles "message" et "titre" qui sont supposés contenir le message à poster et le titre du sujet.
    Pour cela, on va utiliser ceci :
    Code:
    /* On met le titre dans le champ "titre" */
    NomForm.titre.value = "rien";

    /* On met le message dans le champ "message" */
    NomForm.message.value = "rien";


    Si je décortique, une partie (le coin du message), on arrive à cela :

    NomForm : C'est le "name" du formulaire, cela permet de le sélectionner.

    .message : C'est le "name" du champ invisible pour le message. Cela permet de sélectionner ce champ en particulier. Dans le futur, à chaque fois qu'on voudra sélectionner un champ, on ira toujours voir son "name".

    .value : Cela indique la valeur du champ du message.

    = : Cela veut dire que ce qui est à droite du "=" va devenir ce qui est à gauche du "=". Autrement dit, la valeur du champ du message va devenir rien.

    "rien" : C'est ce qui va aller remplacer la valeur du message. Le rien est ce qui va devenir la valeur du message. Quant aux " ", c'est pour indiquer que le "rien" n'est pas une variable ou une valeur qui existe déjà. C'est du texte qu'on vient d'écrire.

    ; : Indique la fin, tout simplement.


    Étape 3.3 - Récupération des données des champs "text", "textarea", "number", "select" et "password"


    Ok, cool... Sauf que je n'ai toujours pas récupéré les donnes de mon formulaire... non?

    Oui et non. Je viens de vous montrer comment sélectionner la valeur d'un champ. Ce sera très semblable pour récupérer les données du formulaire, à quelques exeptions près.

    Petit exemple :
    Code:
        <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {

            /* On met le titre dans le champ "titre" */
            NomForm.titre.value =
              "Commande de " + NomForm.nom.value;

            /* On met le message dans le champ "message" */
            NomForm.message.value =
              "Bonjour, je m'appelle " + NomForm.nom.value + ".";
          }
        //-->
        </script>

    Bon, je vais vous éviter de jouer à "Trouvez la différence". De toute façon, c'est assez frappant, non? Ce que j'ai changé, c'est le "rien" qui devenait le titre du message et le message lui-même.

    Si on regarde le message, j'ai commencé par mettre un texte "Bonjour, je m'apelle ". Ensuite, j'ai mis un +.

    Le + sert à mettre un élément après l'autre. Sinon, ce qui serait après le + ne serait pas pris en compte et cela ferait un bug.

    Le NomForm.nom.value est la valeur du champ qui a le name "nom". J'ai encore mis un + après parce que je voulais rajouter quelque chose à ma phrase.

    Le . est un simple point que je rajoute à la fin de ma phrase.

    Le ; indique la fin ce qui va devenir mon message.


    On fonctionne de la même façon pour construire tout notre message. Cela nous permet de récupérer la valeur de "presque" tous les champs.


    Étape 3.4 - Récupération des données des champs "radio" et "checkbox"


    Oh, et j'ai aussi dit ça si je me souviens bien :
    Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

    Le "value" permet de mettre une valeur de base à chaque champ. Si on ne veut pas en mettre, on a juste à ne pas en mettre.

    La où il y a un hic, c'est que dans la majorité des champs, on écrit quelque chose. Ce quelque chose sera la "value" de ce champ et on ira le sélectionner plus tard dans le javascript.

    Mais qu'est-ce qu'il en est des "checkbox" et des "radio"? Ce sont des cases à cocher, on ne peut rien y écrire! Si on va chercher la valeur, elle sera vide! Qu'est-ce qu'on fait?

    On va tous leur donner une "value". Disons que j'ai une question "quel est votre fruit préféré" et que j'ai deux choix de réponses, "les fraises" et "les bananes". Je donnerais la value "les fraises" à mon premier choix de réponse et "les bananes" à mon deuxième choix de réponse.

    Comme ça, quand vous arriverez au moment de récupérer les données du formulaire, vous pourrez aller chercher les valeur des champs qui sont cochés et ça va vous dire "les fraises" ou "les bananes" à la place de quelque chose comme "coché".

    Quant à regarder quelle case est cochée, la façon est un peu différente pour radio et checkbox.




    Manière pour "radio"

    Voici ce qu'on va faire pour regarder quel champ est coché :
    Code:
    for (i = 0; i < NomForm.paie.length; i++) {
      if (NomForm.paie[i].checked) {
        var varpaie = NomForm.paie[i].value;
      }
    }

    Sans entrer dans les détails, le javascript va voir tous les champs qui ont le "name" paie et donne la valeur de celui qui était coché à la variable "varpaie". Ici, vous changez le "paie" par le "name" de la question où il y a des champs "radio".


    Ensuite, vous vous servez de la variable pour le mettre dans votre message :
    Code:
        <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {

            /* On va vérifier quel case est cochée pour la question "paie" */
            for (i = 0; i < NomForm.paie.length; i++) {
              if (NomForm.paie[i].checked) {
                var varpaie = NomForm.paie[i].value;
              }
            }

            /* On met le titre dans le champ "titre" */
            NomForm.titre.value =
              "Commande de " + NomForm.nom.value;

            /* On met le message dans le champ "message" */
            NomForm.message.value =
              "Bonjour, je m'appelle " + varpaie + ".";
          }
        //-->
        </script>




    Manière pour "checkbox"

    Voici ce qu'on va faire pour regarder quels champs sont cochés :
    Code:
    var totalcoupon = 0;
    for (var i = 0; i < NomForm.coupon.length; i++) {
      if (NomForm.coupon[i].checked) {
        if (totalcoupon < 1) {
          var varcoupon = form.coupon[i].value;
          totalcoupon = 1;
        }
        else {
          varcoupon = varcoupon + ", " + form.coupon[i].value;
        }
      }
    }

    Sans entrer dans les détails, le javascript va voir tous les champs qui ont le "name" coupon et donne la valeur de celui qui était coché à la variable "varcoupon". Ici, vous changez le "coupon" par le "name" de la question où il y a des champs "checkbox". Le premier champ coché est mis tel quel dans la variable et les autres champs cochés sont séparés par des virgules.


    Ensuite, vous vous servez de la variable pour le mettre dans votre message :
    Code:
        <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {

            /* On va vérifier quelles cases sont cochées pour la question "coupon" */
            var totalcoupon = 0;
            for (var i = 0; i < NomForm.coupon.length; i++) {
              if (NomForm.coupon[i].checked) {
                if (totalcoupon < 1) {
                  var varcoupon = form.coupon[i].value;
                  totalcoupon = 1;
                }
                else {
                  varcoupon = varcoupon + ", " + form.coupon[i].value;
                }
              }
            }

            /* On met le titre dans le champ "titre" */
            NomForm.titre.value =
              "Commande de " + NomForm.nom.value;

            /* On met le message dans le champ "message" */
            NomForm.message.value =
              "Bonjour, je m'appelle " + varcoupon + ".";
          }
        //-->
        </script>

    Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


    Étape 4 - Autoriser les formulaires externes



    Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique #230" à laplace d'envoyer directement le message.

    Pour éviter cela, vous devez vous rendre sur :
    > Panneau d'administration
    > > Général
    > > > Forum
    > > > > Sécurité

    Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

    L'erreur #230 ne devrait maintenant plus vous causer problème ~


    Étape 5 - Mettre des champs obligatoires (facultatif)



    Retournez sur votre page HTML.

    Vous remarquerez que dans l'exemple, il y a des petits astérisques rouges après certaines questions. Cela indique que ces questions sont obligatoires.

    Sauf qu'on a beau mettre autant d'étoiles rouges qu'on veut, si on ne va pas dire à notre javascript qu'on a des champs obligatoire, cela ne changera rien. Du coup, on va aller le lui dire.


    Étape 5.1 - Mettre des champs obligatoire (partie html)


    Tout d'abord, vous oubliez le javascript. On va le faire plus tard.

    Pour le moment, on va aller à chacune de nos questions obligatoire (àl'exception de ceux qui ont des champs "radio" ou "checkbox") et dans le champ de ces questions, on va mettre une class qu'on va appeller "obligatoire".

    Comme cela :
    Code:
          <label for="nom">Nom<span class="redd">*</span> :</label><br />
          <input class="obligatoire" type="text" size="50" name="nom" id="nom" /><br />


    Pour les champs "radio", on va fonctionner autrement. Ce qu'on va faire, c'est qu'on va déjà cocher une des case. Comme ça, c'est sûre qu'il y en a au moins une de cochée Razz

    Pour cela, on va leur ajouter un attribut "checked" :
    Code:
          <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
          <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
          <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />


    Enfin, les champs "checkbox"... ne devraient normalement pas être obligatoire. Après tout, si on peut cocher 1 option, 2 options ou toutes les options, c'est logique qu'on puisse en cocher aucune u_u


    Étape 5.2 - Mettre des champs obligatoire (partie javascript)


    Malgré le titre de l'étape, avant de se rendre dans le javascript, on va aller retrouver ceci :
    Code:
    <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" onSubmit="envoiMessage(this)">

    Vous vous rappellez de cet attribut : onSubmit="envoiMessage(this)"

    Cela voulait dire que quand on soumettait le formulaire, il allait faire la fonction dans le javascript pour créer le message et le titre à poster.

    Maintenant, on va remplacer cet attribut par ceci : onSubmit="return envoiMessage(this)"

    La différence? J'ai ajouté un "return " devant le nom de la fonction. Cela veut dire qu'avant d'envoyer le message pour qu'il soit posté, le formulaire va vouloir recevoir un "return", soit un "retour" sur le fait qu'il a le droit ou non d'envoyer le message.

    Si la fonction lui retourne un "false", le message ne sera pas envoyé. Si la fonction lui retourne un "true", le message sera envoyé.




    Allons voir cela dans le javascript maintenant !

    Présentement, on a quelque chose qui ressemble à ceci :
    Code:
        <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {

            /* On met le titre dans le champ "titre" */
            NomForm.titre.value =
              "Commande de " + NomForm.nom.value;

            /* On met le message dans le champ "message" */
            NomForm.message.value =
              "Bonjour, je m'appelle " + NomForm.nom.value + ".";
          }
        //-->
        </script>

    Bien sûr, le votre devrait être plus rempli, etc...

    On va commencer par créer une condition qui dit si le formulaire est bien rempli ou non :
    Code:
            /*Variable qui contient tous les champs obligatoires*/
            var champsobligatoires = document.getElementsByClassName("obligatoire");

            /*On met le total des champs obligatoires*/
            var totalchampsobligatoires = 0;

            /*Pour chaque champ obligatoire, on va aller vérifier s'il est rempli.*/
            for (i = 0; i < champsobligatoires.length; i++) {
              var champvaleur = champsobligatoires[i].value;

              /*Pour chaque champ obligatoire, si il est rempli, on ajoute 1 à la variable du total*/
              if (champvaleur.length > 0) {
                totalchampsobligatoires = totalchampsobligatoires + 1;
              }
            }

            /*On regarde si le total des champs obligatoires remplis est plus petit que le nombre de champs obligatoire*/
            if (totalchampsobligatoires < champsobligatoires.length) {

              /*Si on a moins de champs obligatoires remplis que le nombre de champs obligatoires, on met une alerte et on retourne "false" pour que le formulaire ne soit pas envoyé*/
              alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
              return false;
            }

            /*Si on a autant de champs obligatoires remplis que le nombre de champs obligatoire, on retourne "true" pour que le formulaire soit envoyé*/
            else {
              return true;
            }


    Et on va aller mettre cette condition à la fin de la fonction, après tout le reste :
    Code:
        <script type="text/javascript">
        //<!--
          /*Fonction pour créer le message*/
          function creationMessage(NomForm) {

            /* On met le titre dans le champ "titre" */
            NomForm.titre.value =
              "Commande de " + NomForm.nom.value;

            /* On met le message dans le champ "message" */
            NomForm.message.value =
              "Bonjour, je m'appelle " + NomForm.nom.value + ".";

            /*Variable qui contient tous les champs obligatoires*/
            var champsobligatoires = document.getElementsByClassName("obligatoire");

            /*On met le total des champs obligatoires*/
            var totalchampsobligatoires = 0;

            /*Pour chaque champ obligatoire, on va aller vérifier s'il est rempli.*/
            for (i = 0; i < champsobligatoires.length; i++) {
              var champvaleur = champsobligatoires[i].value;

              /*Pour chaque champ obligatoire, si il est rempli, on ajoute 1 à la variable du total*/
              if (champvaleur.length > 0) {
                totalchampsobligatoires = totalchampsobligatoires + 1;
              }
            }

            /*On regarde si le total des champs obligatoires remplis est plus petit que le nombre de champs obligatoire*/
            if (totalchampsobligatoires < champsobligatoires.length) {

              /*Si on a moins de champs obligatoires remplis que le nombre de champs obligatoires, on met une alerte et on retourne "false" pour que le formulaire ne soit pas envoyé*/
              alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
              return false;
            }

            /*Si on a autant de champs obligatoires remplis que le nombre de champs obligatoire, on retourne "true" pour que le formulaire soit envoyé*/
            else {
              return true;
            }
          }
        //-->
        </script>

    Et c'est tout pour cette partie \o/

    Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !


    Étape 6 - Mettre le formulaire dans une iframe (facultatif)



    Maintenant que la page HTML est créée avec votre formulaire à l'intérieur, peut-être que vous allez vouloir insérer votre formulaire à quelque part sur votre forum. Pour cela, vous pouvez créer un iframe que vous mettrez dans un message.

    Puis, nous allons mettre le code suivant dans le message/sujet où vous voulez mettre le formulaire :
    Code:
    <iframe style="display: block; margin: auto; width: 600px; height: 1000px;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>

    Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

    Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

    Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^




    C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

    À plus !



    avatar
    Shaneliae
    FémininAge : 21Messages : 806

    le Mer 28 Déc 2016 - 13:04

    Super tuto !

    Je n'ai rien à redire et je n'ai pas repéré de fautes, et depuis le temps qu'il fallait faire un tuto là-dessus, c'est chose faite ! Bref je valide et déplace, merci à toi ♥



    Présence réduite.
    avatar
    Aidden
    MasculinAge : 23Messages : 45

    le Lun 10 Juil 2017 - 18:11

    Merci pour le tutu, il est bien expliqué ! Je rencontre simplement un petit soucis avec l'iframe. Ce dernier ne s'affiche pas dans mon message. J'ai mon formulaire :

    http://pro-fuma-soccer.forumactif.org/h3-formulaire-cr

    l'iframe devrait donc être :



    Mais rien ne s'affiche Sad

    EDIT 1 : Ok, sur ce forum ça fonctionne, bizarre.

    EDIT 2 : Je viens de voir que l'iframe fonctionne dans un message posté. Mais j'aimerais qu'il soit situé dans le règlement de poste.


    Contenu sponsorisé


      La date/heure actuelle est Sam 19 Aoû 2017 - 0:10