Header
Partagez | 

Créer un formulaire qui génère un code

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Créer un formulaire qui génère un code   Jeu 21 Juil - 19:32

Bonjour à tous Smile

dans ce tutoriel, nous allons apprendre à faire un formulaire qui, une fois validé, va nous gérer un code de présentation à copier coller.

Par exemple [Tester].

Comme vous l'avez vu ici, je vais récolter des informations simples. A vous d'en ajouter si vous le désirez ^^

Pré-requis



Pour ce tutoriel, vous allez avoir besoin de :

-> un éditeur de texte type [notepad] ou [gedit]
-> une idée du formulaire que vous désirez
-> quelques connaissances en html et css
-> un hébergeur de fichier.

Le html



Pour commencer, ouvrez votre éditeur de texte et copier la structure basique d'une page html

Code:
<html>
<head>
   <title>Le titre de ma page</title>
      
<style type="text/css">
   
/* Le css sera ici */
   
</style>

<script type="text/javascript">
<!--

-->
</script>

</head>
<body>

<!-- Le contenu sera ici -->

</body>
</html>

Enregistrez votre page en "formulaire.html" par exemple.

Ensuite, on va mettre dans notre page un bloc (div) ayant un nom d'id (pour qu'on puisse bien travaillé le css ensuite). Ce bloc contiendra pour l'instant :
-> un titre : "Générer un code"
-> 2 sous-titres : "Veuillez remplir le formulaire suivant :" et "Aperçu du rendu :"

ce qui nous donne :

Code:
<body>

<div id="formulaire">

   <h1>Générer un code</h1>

   <h2>Veuillez remplir le formulaire suivant :</h2>
   
      <h2>Aperçu du rendu :</h2>
      
</div>

</body>

Nous avons ce rendu pour l'instant :
Spoiler:
 

Le formulaire



On va maintenant s'attaquer au formulaire. Ici, j'ai choisi de faire un formulaire simple pour récupérer le pseudo, le sexe et quelques infos en plus.

On va donc commencer par coder un formulaire. Pour cela, je vais m'inspirer du début de [ce tutoriel].

Tout d'abord, un formulaire se trouve entre balise
Code:
<form>...</form>

A ceci, on va devoir dire au formulaire qu'on va prendre en compte des éléments qui vont être envoyés : post (à la différence du "get" qui lui, prend en compte ce qui est indiqué dans l'url de la page Smile )
Code:
<form method="post">....</form>

Ensuite, il faut dire au formulaire quelle action il doit réaliser une fois qu'on clique sur "envoyer". Nous, on veut qu'il aille activer le script au début de notre page. Pour cela, on va lui dire que son action, c'est juste de relire le même fichier : on met donc un lien "fictif" qui renvoit vers la même page.
Code:
<form method="post" action="#">....</form>

Maintenant, nos contenus :

-> Le pseudo : C'est une zone de saisi de texte "court"

On les code en utilisant des "input" qui est une balise "auto-fermante" (pas besoin d'ouvrir d'un coté et de refermer de l'autre)
Code:
<input />

Les input peuvent être de plusieurs types (je ne m'attarderai pas là dessus ici). Dans notre formulaire nous allons utiliser le type "texte"
Code:
<input type="text" />

Ici, comme nous allons vérifier d'une part le contenu de ses inputs et que nous allons ensuite les traiter, il faut qu'on puisse les reconnaitre. On va donc leur donner un nom "name".
Code:
<input type="text" name="pseudo" />

Enfin, on peut définir une taille pour nos input (=size) qui correspond en fait au nombre de caractères pouvant entrer dans la case en même temps (exemple, si vous mettez 10, votre case ne pourra contenir que 10 caractères visible en même temps) et un nombre maximum de caractère (pour éviter les pseudo de 50 lignes par exemple). Dans ce cas, on utilisera "maxlength"
Code:
<input type="text" name="pseudo" size="30" maxlength="200"/>

-> Le genre : C'est une liste déroulante.

Nous allons utiliser la balise sélect à laquelle nous allons devoir donner un nom, pour l'identifier plus tard

Code:
<select name="genre"> ....</select>

Chaque choix (non précisé, une fille, un garçon) est une option. Chaque option doit avoir une valeur et un contenu. Ici, nous en avons 3

Code:
<option value="(pas d'infos)">Non précisé</option>
         <option value="une fille">une fille</option>
         <option value="un garçon">un garçon</option>

Ici, on aura donc :

Code:
<select name="genre">
         <option value="(pas d'infos)">Non précisé</option>
         <option value="une fille">une fille</option>
         <option value="un garçon">un garçon</option>
      </select>

-> En savoir plus sur moi : C'est une zone de saisi de texte "long"

Cette fois, nous allons utiliser la balise "textarea" (= champs / zone de texte).
Code:
<textarea>....</textarea>

Une fois encore, nous allons lui donner un nom pour pouvoir la traiter
Code:
<textarea name="infos">...</textarea>

Ensuite, il faut lui donner une taille en largeur : on va compter en nombre de colonnes (= cols) ; et une hauteur : cette fois on compte en nombre de ligne (=row).
Code:
<textarea cols="60" rows="10" name="infos">...</textarea>

Si on le désire, on peut aussi mettre une valeur par défaut Smile
Code:
infosVeuillez entrer votre message</textarea>

---------

Pour chacune de nos questions, on va donner un petit texte "indicateur" qu'on va mettre entre balise

Code:
<label>....</label>

Qui sont considérées comme des balises "en ligne" (c'est à dire, sans retour à la ligne). N'oubliez donc pas d'ajouter une balise de retour à la ligne si vous ne voulez pas que tout se suive.

---------

Notre formulaire est presque prêt, il ne manque que le bouton envoyer. Pour cela, nous allons une fois de plus utiliser des input Smile

Pour envoyer le formulaire, la logique voudrait qu'on utilise le "submit" pour soumettre. Cependant, ici, on va vérifier le formulaire avec du javascript. On va donc avoir une action qui va se déclancher au "click" de la souris (onClick). On va donc utiliser un bouton et une fonction pour vérifier le formulaire. Notre bouton se présentera donc ainsi :
Code:
<input type="button" onClick="verif(this.form)" value="Générer le code" />

Quand on va cliquer, on va donc déclancher la fonction 'verif()' sur ce (=this) formulaire (=form). Nous allons voir ça dans le point suivant, rassurez vous Very Happy

Donc, si on se résume, pour le moment, nous avons donc ceci :

Code:
<html>
<head>
   <title>Le titre de ma page</title>
      
<style type="text/css">
   
/* Le css sera ici */
   
</style>

<script type="text/javascript">
<!--

-->
</script>

</head>
<body>

<div id="formulaire">

   <h1>Générer un code</h1>

   <h2>Veuillez remplir le formulaire suivant :</h2>
   
   <form action="#" method="post" id="rempli">
      <label>Pseudo</label> :<input type="text" name="pseudo" size="30" maxlength="200"/>

      <label>Sexe :</label> :
      <select name="genre">
         <option value="(pas d'infos)">Non précisé</option>
         <option value="une fille">une fille</option>
         <option value="un garçon">un garçon</option>
      </select>

      <label>En savoir plus sur moi :</label>
<center><textarea cols="60" rows="10" name="infos"></textarea></center>
      
<input type="button" onClick="verif(this.form)" value="Générer le code" />
   </form>
   
   <h2>Aperçu du rendu :</h2>
      
      
</div>

</body>
</html>

Spoiler:
 

Le javascript



*** 1/ On crée la fonction

Tout d'abord, on va indiquer au début de notre page html (dans le head) que nous allons commencer un script javascript, et pour éviter que le validateur W3C ne soit pas content, on va le mettre en commentaire Smile
Code:
       <script type="text/javascript">
      <!--  //         

mon script sera là

       //-->
       </script>

Ensuite, nous avons donné un nom à notre fonction. Oui souvenez-vous le "verif(this.form)". Eh bien le "verif()" est le nom de notre fonction. On va donc commencer par ça dans notre script. Une fonction se présente ainsi :
Code:
function nom_de_la_fonction(LeForm){
ce qu'il faut faire;
}

On n'oublie pas les accolades qui délimitent la fonction et les ; après chaque ligne de script Wink

Donc ici ça nous fait :
Code:
       <script type="text/javascript">
      <!--  //         

function verif(LeForm){

}

       //-->
       </script>

*** 2/ On déclare les variables

Maintenant, il va falloir définir chaque variable, c'est à dire chaque donnée à vérifier (le pseudo, le genre, les infos). Ici, on va surtout vérifier qu'on nous envoie pas un message vide. Pour définir une variable, cela se présente de cette façon :
Code:
var le_nouveau_nom = LeForm.nom_dans_le_formulaire.value;
Autrement dit, on crée un "bloc mémoire" avec un nouveau nom (var le_nouveau_nom) et on lui dit : "tu vas chercher la valeur (=value) qui se trouve dans le truc nommée nom_dans_le_formulaire qui est dans le formulaire (LeForm)".

Donc ici, on va avoir 3 variables à déclarer, et ça va nous donner :

Code:
var pseudo = LeForm.pseudo.value;
   var infos = LeForm.infos.value;
   var genre = LeForm.genre.value;

Juste que là, facile Very Happy

Nous en sommes là :
Code:
   <script type="text/javascript">
<!--  //         
   function verif(LeForm){
      var pseudo = LeForm.pseudo.value;
      var infos = LeForm.infos.value;
      var genre = LeForm.genre.value;
   }

//-->
   </script>

*** 3/ On vérifie que les champs sont bien remplis

Et bien oui ! le but est de ne pas avoir de champs vides Smile Pour cela, on va vérifier que ceux-ci ne contiennent pas du vide. Vous allez voir c'est tout simple Very Happy

Tout d'abord, on met une condition "si" (=if)
Code:
if(la condition){
   je fais ça;
   }

En condition, on va vérifier que notre variable n'est pas vide :
Code:
pseudo == ""

== signifie "est égale à"
"" signifie "ne contient rien"


Donc on a :
Code:
if(pseudo == ""){
   je fais ça;
   }

Si l'utilisateur a oublié de mettre un pseudo, il va falloir lui rappeler. Pour cela, on va émettre une "alerte" (une pop up en fait) avec un message du type "Veuillez entrer un pseudo". Cela va se présenter ainsi :
Code:
alert ("Veuillez entrer un pseudo");

et donc si on assemble le tout :
Code:
if(pseudo == ""){
   alert ("Veuillez entrer un pseudo");
   }

On va ensuite définir une nouvelle variable qui va être soit vraie (=true) soit fausse (=false) et on va dire à notre formulaire : "si ma variable existe (donc est vraie), dans ce cas, on envoie le formulaire, sinon, on laisse tomber".

> On commence donc par définir la variable, et, comme on est des gens positifs, on va considérer qu'elle existe dès le début (donc que le formulaire est bon)
Code:
var ok = true;

-> Ensuite, je vais ajouter dans chacun de mes tests cette variable, en indiquant que, comme il y a une erreur, elle disparait (devient donc fausse).
Code:
ok = false;

ce qui fait pour le pseudo par exemple :
Code:
if (pseudo == ""){
      ok = false;
        alert("Veuillez entrer un pseudo");   
   }   

Vous avez saisi ? Alors, on va ça pour chaque variable (sauf pour les listes déroulantes, car la première valeur est celle prise par défaut).

*** Et comment je récupére le code ?

On arrive dans le vif du sujet Smile On va générer le code uniquement si toutes les vérifications sont faites (donc si le ok = true). Donc, on va regarder si notre variable "ok" existe. Si c'est le cas, on générera le code, sinon, on ne fait rien (la personne a déjà reçu des messages d'alerte Wink )
Code:
if(ok){
   on génére;
   }

Ici, on va récupérer dans une variable "contenu", le html ainsi que les variables entrées par l'utilisateur. En javascript, pour afficher le contenu d'une variable dans un texte, il faut faire ceci :

Code:
"+nom_variable+"

Moi, je veux que le texte générer soit comme ça

Code:
<div class="presentation"><h1 class="titre">Présentation de Pseudo</h1><p><span class="mea">Je suis</span> genre </p><p><span class="mea">En savoir plus sur moi :</span>
 infos</p>

Donc si je traduits avec les variables :

Code:
<div class="presentation"><h1 class="titre">Présentation de "+pseudo+"</h1><p><span class="mea">Je suis</span> "+genre+" </p><p><span class="mea">En savoir plus sur moi :</span>
 "+infos+"</p>

On va mettre tout ça dans la variable "contenu"

Code:
var contenu = "<div class="presentation"><h1 class="titre">Présentation de "+pseudo+"</h1><p><span class="mea">Je suis</span> "+genre+" </p><p><span class="mea">En savoir plus sur moi :</span>
 "+infos+"</p>";

Pour le moment, le code est pas bon. En effet, les guillemets se chamaillent. Il va donc falloir dire : "attention, tu ne prends pas en compte ceux qui sont dans le html". Pour cela, on va ajouter \ devant chaque " du code html. Ce qui nous donne

Code:
var contenu = "<div class=\"presentation\"><h1 class=\"titre\">Présentation de "+pseudo+"</h1><p><span class=\"mea\">Je suis</span> "+genre+"</p><p><span class=\"mea\">En savoir plus sur moi :</span>
 "+infos+"</p>";

ça va toujours ? J'avoue, c'est un peu compliqué là... Et ça va l'être encore un peu Embarassed

Maintenant, on va devoir afficher ce code généré. Ici, on va le récupérer 2 fois :
-> une fois pour avoir un aperçu :
-> une fois pour avoir le code lui même

Pour cela on va remplacer le contenu html d'un bloc (div) en repérant ce bloc grâce à son id (on codera ses blocs juste après ^^ ). On va donc avoir :

Code:
document.getElementById("code_genere").innerHTML = ""+contenu+"";
      document.getElementById("apercu").innerHTML = ""+contenu+"";

Notre javascript est terminé Smile On a ceci :

Code:
<script type="text/javascript">
<!--

function verif(LeForm){

   var pseudo = LeForm.pseudo.value;
   var infos = LeForm.infos.value;
   var genre = LeForm.genre.value;

   var ok = true;

   if (pseudo == ""){
      ok = false;
        alert("Veuillez entrer un pseudo");   
   }   
   
   if (infos == ""){
      ok = false;
        alert("Veuillez nous donner plus d'infos");   
   }   
   
   if (ok){
      var contenu = "<div class=\"presentation\"><h1 class=\"titre\">Présentation de "+pseudo+"</h1><p><span class=\"mea\">Je suis</span> "+genre+"</p><p><span class=\"mea\">En savoir plus sur moi :</span>
 "+infos+"</p>";
      document.getElementById("code_genere").innerHTML = ""+contenu+"";
      document.getElementById("apercu").innerHTML = ""+contenu+"";   
   } 
}
-->
</script>

Le plus dur est derrière nous Very Happy

Voir le rendu et récupérer le code



Allez ! Dernière ligne droite ^^

Comme je vous l'annonçais juste au dessus, nous avons mis notre code dans éléments ayant pour nom d'id "code_genere" et "apercu". Nous allons donc devoir créer ses 2 éléments en html Smile

1/ L'élement "apercu"

Ici, on va faire un bloc tout simple (div) et vide.

Code:
<div id="apercu"> </div>

2/ L'élement "code_genere"

Un peu plus complexe ici. Pour éviter que le code ne soit interprété par le navigateur, il va falloir ruser Very Happy Pour cela, on va utiliser un textarea. Mais qui dit textarea dit formulaire Very Happy

Code:
<form>
      <label>Voici le code à copier/coller</label>

      <textarea cols="60" rows="10" id="code_genere"></textarea>
   </form>

Ok... C'est chouette... Mais... On va faire en sorte que les membres ne puissent pas du tout écrire dans cette partie. Pour cela, on va dire au textarea "toi, tu es seulement lu". On va donc ajouter "readonly" dans notre textaera

Code:
<form>
      <label>Voici le code à copier/coller</label>

      <textarea cols="60" rows="10" id="code_genere" readonly></textarea>
   </form>

Et si on allait encore plus loin ? Oui ! Si on permettait aux membres de récupérer le code en un seul clic ? Pour cela, on va ajouter un bouton ainsi qu'un javascript se déclanchant quand on va cliquer sur le bouton. Ce javascript va sélectionner le contenu de l'élement ayant pour nom "code généré".

Code:
<input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();">

Et voilà ! C'est fini ^^ Si on résume, voici votre code complet

Code:
<html>
<head>
   <title>Le titre de ma page</title>
      
<style type="text/css">
   
/* Le css sera ici */
   
</style>

<script type="text/javascript">
<!--

function verif(LeForm){

   var pseudo = LeForm.pseudo.value;
   var infos = LeForm.infos.value;
   var genre = LeForm.genre.value;

   var ok = true;

   if (pseudo == ""){
      ok = false;
        alert("Veuillez entrer un pseudo");   
   }   
   
   if (infos == ""){
      ok = false;
        alert("Veuillez nous donner plus d'infos");   
   }   
   
   if (ok){
      var contenu = "<div class=\"presentation\"><h1 class=\"titre\">Présentation de "+pseudo+"</h1><p><span class=\"mea\">Je suis</span> "+genre+"</p><p><span class=\"mea\">En savoir plus sur moi :</span>
 "+infos+"</p>";
      document.getElementById("code_genere").innerHTML = ""+contenu+"";
      document.getElementById("apercu").innerHTML = ""+contenu+"";   
   } 
}
-->
</script>
</head>
<body>

<div id="formulaire">

   <h1>Générer un code</h1>

   <h2>Veuillez remplir le formulaire suivant :</h2>
   
   <form action="#" method="post" id="rempli">
      <label>Pseudo</label> :<input type="text" name="pseudo" size="30" maxlength="200"/>

      <label>Sexe :</label> :
      <select name="genre">
         <option value="(pas d'infos)">Non précisé</option>
         <option value="une fille">une fille</option>
         <option value="un garçon">un garçon</option>
      </select>

      <label>En savoir plus sur moi :</label>
<textarea cols="60" rows="10" name="infos"></textarea>
      
<input type="button" onClick="verif(this.form)" value="Générer le code" />
   </form>
   
   <h2>Aperçu du rendu :</h2>
      
   <div id="apercu"> </div>
   <form>
      <label>Voici le code à copier/coller</label> <input type="button" value="Selectionner le code" onClick="javascript:document.getElementById('code_genere').select();">

      <textarea cols="60" rows="10" id="code_genere" readonly></textarea>
   </form>
      
</div>

</body>
</html>

Ajoutez à ça un peu de CSS, et le tour est joué ^^




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Re: Créer un formulaire qui génère un code   Dim 16 Juin - 10:53

Comment récupérer les valeurs des checkbox ?



On va donc commencer par :
-> bien leur donner un nom (name)
-> leur donner un attribut "value". Ce sont ces valeurs que l'on va récupérer et afficher dans notre code.

Code:
<label>Vos domaines :</label><br />
       <input type="checkbox" name="Choix1" value="graphisme" /> <label class="dom" for="graphisme">Graphisme</label><br />
       <input type="checkbox" name="Choix2" value="codage" /> <label class="dom" for="codage">Codage</label><br />
       <input type="checkbox" name="Choix3" value="sims 2" /> <label class="dom" for="sims 2">Sims 2</label><br />
       <input type="checkbox" name="Choix4" value="sims 3" /> <label class="dom" for="sims 3">Sims 3</label><br />
      <input type="checkbox" name="Choix5" value="écriture" /> <label class="dom" for="écriture">Écriture</label><br/><br/>
 
On va ensuite ajouter un nom (name) au formulaire pour le cibler Smile
Code:
<form action="#" method="post" name="FormulairePres">
 
Au niveau du js. On va commencer par créer une nouvelle variable (= une sorte de case mémoire) qui va contenir ces infos.
Code:
var domaine = "";
Ensuite, on va tester pour chaque checkbox si elle est cochée ou non
Code:
document.forms['FormulairePres'].elements['Choix1'].checked
et dans le cas où elle est cochée,
Code:
?
on récupére la valeur
Code:
document.forms['FormulairePres'].elements['Choix1'].value
et on ajoute un "-" juste après
Code:
: "-";

et on met tout ça dans la variable
Code:
domaine += document.forms['FormulairePres'].elements['Choix1'].checked ? document.forms['FormulairePres'].elements['Choix1'].value : "-";
ici le += signifie que l'on ajoute dans la variable cette info. Si on avait seulement =, cela signifierait qu'on remplace le contenu de la variable par la nouvelle info (c'est clair ou pas du tout ? Embarassed)

et on n'oublie pas d'ajouter dans la variable contenu :
Code:
<p>Mes domaines : "+domaine+"</p>

Du coup, dans le Js on aura ça en plus :
Code:
/* On récupére les données des checkbox */
  
  var domaine = "";
  
   domaine += document.forms['FormulairePres'].elements['Choix1'].checked ? document.forms['FormulairePres'].elements['Choix1'].value : "-";
 domaine += document.forms['FormulairePres'].elements['Choix2'].checked ? document.forms['FormulairePres'].elements['Choix2'].value : "-";
 domaine += document.forms['FormulairePres'].elements['Choix3'].checked ? document.forms['FormulairePres'].elements['Choix3'].value : "-";
 domaine += document.forms['FormulairePres'].elements['Choix4'].checked ? document.forms['FormulairePres'].elements['Choix4'].value : "-";
 domaine += document.forms['FormulairePres'].elements['Choix5'].checked ? document.forms['FormulairePres'].elements['Choix5'].value : "-";
Revenir en haut Aller en bas
Créer un formulaire qui génère un code
Page 1 sur 1
 Sujets similaires
-
» [Résolu] Recherche d'un BON aspirateur de sites + formulaire informat
» Valider formulaire page html [RESOLU]
» Formulaire et spam
» Probleme avec caption sur un formulaire
» ♦ Formulaire de partenariat ♦
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+