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

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>



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

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:

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:

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:

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:

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:

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:

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

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:

Une fois encore, nous allons lui donner un nom pour pouvoir la traiter

Code:

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:

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:

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:

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:

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:

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

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

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:

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:

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

</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é ^^

Des questions ? C'est par [ici]